CODEWITHSUNDEEP
angularjs
JG_GJ
JG_GJ

Reputation: 785

How to use ng-model, in a modal. angularjs?

I have the following modal, With ng-model item

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

The modal call it from a button belonging to a record in datatable, "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>';
              })                    
          ];

I need to pass the data parameter, and so make use of the ng-model in the modal

Upvotes: 1

Views: 1807

Answers (2)

ash ketchum
ash ketchum

Reputation: 57

This can solved using dummy object. here is a code

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

dummy object

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

hope you get to understand it, This is better way to use it

Upvotes: 0

lealceldeiro
lealceldeiro

Reputation: 14998

There is no difference between the way we use ng-model in a modal and any other part of the website.

In your case, I suppose you want to show the user's data displayed which belong to a specific record in the table.

So if your ng-model in the modal belongs to the same controller which contains the edit func, you just need to bind the information passed as parameter to the corresponding ng-model in the modal. When the modal shows up, it will show the bind information in the modal.

Let's say, in your modal you have this:

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

Then in your edit function you just have to say

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
}

Upvotes: 3

Related Questions