如何在模態中使用ng模型。 angularjs？

我有以下的模態，隨着NG-模型項如何在模態中使用ng模型。 angularjs？

<div class="uk-modal" id="modal_header_footer"> 
<div class="uk-modal-dialog"> 
    <div class="uk-modal-header"> 
     <h3 class="uk-modal-title">Editar Usuario</h3> 
    </div> 
    <form id="form_validation" class="uk-form-stacked"> 
     <div class="uk-grid" data-uk-grid-margin> 
      <div class="uk-width-medium-1-2"> 
       <div class="parsley-row"> 
        <label for="fullname">user<span class="req">*</span></label> 
        <input type="text" ng-model="item.user" required class="md-input" md-input /> 
       </div> 
      </div> 
      <div class="uk-width-medium-1-2"> 
        <div class="parsley-row"> 
        <label for="fullname">name<span class="req">*</span></label> 
        <input id="nombre" type="text" name="nombre" ng-model="item.name" required class="md-input" md-input /> 
       </div> 
      </div> 
     </div> 
     <div class="uk-grid" data-uk-grid-margin> 
      <div class="uk-width-medium-1-2">      
       <div class="parsley-row"> 
        <label for="email">Email<span class="req">*</span></label> 
        <input id="email" type="email" name="email" ng-model="item.email" data-parsley-trigger="change" required class="md-input" md-input /> 
       </div> 
      </div> 
     </div> 
    </form> 
    <div class="uk-modal-footer uk-text-right"> 
     <button type="button" class="md-btn md-btn-flat uk-modal-close">Cerrar</button> 
     <button type="button" ng-click="EditarUsuario(item)" class="md-btn md-btn-flat md-btn-flat-primary">Aceptar</button> 
    </div> 
</div>

模態調用它來自屬於在數據表中的記錄的按鈕時，「數據-UK峯=」 {目標：\ 「#modal_header_footer \」}「」

vm.dtColumns = [ 
       DTColumnBuilder.newColumn('id').withTitle('Id'), 
       DTColumnBuilder.newColumn('usuario').withTitle('Usuario'), 
       DTColumnBuilder.newColumn('nombre').withTitle('Nombre'), 
       DTColumnBuilder.newColumn('email').withTitle('Email'), 
       DTColumnBuilder.newColumn('telefono').withTitle('Telefono'), 
       DTColumnBuilder.newColumn('estado').withTitle('Estado'), 
       DTColumnBuilder.newColumn('created_at').withTitle('Creado'), 
       DTColumnBuilder.newColumn(null).withClass('parent').withTitle('Acciones').notSortable().renderWith(function(data,type,full){ 
        vm.usuario[data.id] = data; 
        return ' <a href="#" data-uk-modal="{target:\'#modal_header_footer\'}" ng-click="showCase.edit(showCase.usuario[' + data.id + '])"><i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>'+ 
           ' <a href="#" data-uk-modal="{target:\'#modal_header_footer_eliminar\'}"><i class="md-icon material-icons md-bg-red-900 uk-text-contrast">&#xE872;</i></a>'; 
       })      
      ];

我需要傳遞的數據參數，所以利用NG-模型的模態

來源

2017-03-02 JG_GJ

是沒有區別的是我們在網站的模式和其他任何部分使用ng-model。

就你而言，我想你想顯示屬於表中特定記錄的用戶數據。

因此，如果模態中的ng-model屬於包含edit func的相同控制器，則只需將作爲參數傳遞的信息綁定到模態中相應的ng-model。當模式顯示時，它將顯示模態中的綁定信息。

比方說，在你模式你有這樣的：

<div class="parsley-row"> 
    <label for="fullname">user<span class="req">*</span></label> 
    <input type="text" ng-model="item.user" required class="md-input" md-input /> 
</div>

然後在你的編輯功能您只需要說

function edit(user){ 
    $scope.item = user; //...item is the var used for binding the information to the modal and user is the var coming from the table 
}

來源

2017-03-02 19:24:04 lealceldeiro

非常感謝你 –

不客氣！如果這對你有用，請爲未來的讀者提供[upvote]（http://meta.stackexchange.com/questions/139/why-should-i-upvote-a-question）這個問題。 – lealceldeiro

我還是不明白，因爲當我在表格中對模態進行更改沒有實時反映，直到我上傳頁面時，我注意到我已經更新了註冊表。 –

這可以通過使用虛擬對象來解決。這裏是一個代碼

<td title="'Payment'"> <button type="button" class="btn btn-info btn-lg pay-btn" data-toggle="modal" data-target="#myModal" ng-click="mommy(obj)" >yuty</button> 

    <!-- Modal content--> 
    <div id="myModal" class="modal fade" role="dialog">

<!-- Modal content--> 
<div class="modal-content"> 

    <div class="modal-body"> 
     <form> 
<div class="form-group"> 
<label>Amout</label> 
<input type="Number" ng-model="vvv.payment"> 

</div>

    <div class="modal-footer"> 
<button type="button" class="btn btn-default" data-dismiss="modal" ng- click="mono=false">Close</button> 
<button type="button" class="btn btn-default" ng- click="modify(vvv._id,vvv)">Submit</button> 
     </div> 
    </div>

虛擬對象

$scope.mommy = function(h){ 
console.log(h.payment); 
$scope.vvv = h; 
    }

希望你能理解，這是更好的使用方法

來源

2017-04-25 08:25:12

如何在模態中使用ng模型。 angularjs？

回答

相關問題