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

Question

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 ' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i>'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i>';
})
];
I need to pass the data parameter, and so make use of the ng-model in the modal

Answer 1

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
}

Answer 2

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