如何在模态中使用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？

回答

相关问题