Question

我有以下模式，使用ng-model项目

<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>

模态从属于数据表中记录的按钮调用它，“data-uk-modal =”{target：\'＃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-model

Answer 1

我们在模式中使用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
}

Answer 2

这可以使用虚拟对象解决。这是一个代码

<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;
  }

希望你能理解它，这是更好的使用方式

如何在模态中使用ng-model。 angularjs？

2 个答案: