We Keep Coding

Is there a way to populate mdDialog fields after the Dialog shows?

I have a simple mdDialog for editing form entries, that pops up when you double-click a grid row. The dialog appears and everything works, except I'd like to populate the fields in the dialog with the contents of the grid row. The problem is that I'm not sure where to actually do this, and every spot I've tried so far is accessed before the Dialog has actually been shown, so the HTML elements inside the dialog don't exist yet to be populated. Here's the method that calls the dialog:
$scope.showUpdateDialog = function(data) {
$mdDialog.show({
controller: UpdateDialogController,
scope: $scope.$new(),
templateUrl: 'js/admin/UpdateUsersDialog.html',
parent: angular.element(document.body),
clickOutsideToClose:true,
fullscreen:true
})
.then(function(answer) {
$scope.status = 'Updated User';
}, function() {
$scope.status = 'Update User Failed';
});
};
And here is the controller for it:
function UpdateDialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
$scope.add = function(dialogdata) {
// For clarity I removed the contents of what happens with the add, as this part works fine.
};
}
Inside that templateUrl: 'js/admin/UpdateUsersDialog.html' are several elements, that all look like this:
<input type="text" class="form-control" id="updatelogin"
placeholder="Enter Name" data-ng-model="dialogdata.login" disabled />
I thought that the data-ng-model bit would take care of it (dialogdata.login etc. are all assigned variables before the dialog is kicked off) but it doesn't, so I was attempting to force it by doing something like this:
var ulogin = document.getElementById('updatelogin');
ulogin.setInnerHTML(content.login);
...but since the elements don't exist yet the 'ulogin' var keeps coming back as null. Is there a way to do this?

Okay after some babbaging I figured something out, maybe this can help others who hit a similar problem. The solution for me was to put everything into the onRowDoubleClicked method, which is called in the ag-grid when I double click a row in the grid:
function onRowDoubleClicked() {
var selectedRowNode = $scope.UserTableGrid.api.getSelectedNodes()[0];
var data = selectedRowNode.data;
$scope.login = data.login;
$scope.name = data.name;
$scope.email = data.email;
$scope.type = data.roles;
$scope.userId = $scope.getUserId($scope.login);
showUDialog(data);
function showUDialog(data) {
$scope.email = data.email;
$mdDialog.show({
controller: UpdateDialogController,
scope: $scope.$new(),
templateUrl: 'js/admin/UpdateUsersDialog.html',
parent: angular.element(document.body),
clickOutsideToClose:true,
fullscreen:true
})
.then(function(answer) {
$scope.status = 'Updated User';
}, function() {
$scope.status = 'Update User Failed';
});
}
function UpdateDialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
$scope.add = function() {
//Close the Dialog
$scope.answer("Completed");
var userJson = {
"name" : $scope.name,
"login" : $scope.login,
"password" : "",
"roles" : $scope.type,
"email" : $scope.email,
"tpbUserId" : $scope.userId
};
var url = 'RobotDataInterface/User/updateUser';
var data = JSON.stringify(userJson);
$http.post(url, data).then(
function success(response) {
$scope.addUserCallback(response);
},
function failure(response) {
$scope.generalRestFailureCallback(response);
}
);
};
$scope.addUserCallback = function(data) {
console.log("User Updated!");
$scope.loadTableData();
}
}
}
This fixed what was a scoping issue, and allowed the fields in the templateUrl to get populated by tying them to those same values:
<input type="text" class="form-control" id="name"
placeholder="Enter Name" data-ng-model="name" />

ng-change update model with latency

everyone.
I have a trouble with angularjs. I created custom directive for input[type="text"] and passed into variable as model. But ng-change event called function with previous value of variable.
Example:
State: 0, Type 1, In function - 0.
State: 1, Type 548, In function - 1.
State:548, Type 3, In function 548.
My html:
<div ng-controller="simpleCTRL">
<mr-textfield is-required="true" value="val" title="Minutes" type="text" change="ChangeVal()"></mr-textfield>
<input type="text" ng-model="val" ng-change="ChangeVal()"/>
</div>
</div>
And js:
<!-- language: lang-js -->
angular.module('SimpleInterestApp', [])
.controller('simpleCTRL', function($scope) {
$scope.val = 0;
$scope.ChangeVal = function() {
console.log($scope.val);
};
})
.directive('mrTextfield', function () {
return {
restrict: 'E',
template: "<div class='textfield'><input type='{{::type}}' ng-required='isRequired' ng-model='value' ng-change='change()'><span class='bar'></span><label>{{::title}}</label></div>",
replace: true,
transclude: true,
scope: {
value:"=",
title:"#",
type:"#",
isRequired:"=",
change:"&"
}
};
});

Wrap console.log inside a $timeout.
$scope.ChangeVal = function() {
$timeout(function() {
console.log($scope.val);
})
};
See working plunker.

AngularJS: Update JSON in modal with specific key

What's the best practice to update json in view with specific key.
In my case, i want to update feedback from 'not answered' to 'answered' .
[
{
"id": "34",
"mac_address": "cd:9e:17:64:1b:42",
"question": "Help me",
"time": "2016-03-16 16:22:08",
"is_answered": false
}
]
to
[
{
"id": "34",
"mac_address": "cd:9e:17:64:1b:42",
"question": "Help me",
"time": "2016-03-16 16:25:29",
"is_answered": true
}
]
There is some list my customer feedbacks:
<div class="parent" ng-repeat="customer in customers">
<h2>{{customer.id}}</h2>
<p>{{customer.question}}</p>
<h4 ng-show="{{customer.is_answered}}">Answered</h4>
<h4 ng-show="!{{customer.is_answered}}">Not Answered</h4>
<button ng-show="!{{customer.is_answered}}" ng-click="showModal()">Reply</button>
</div>
When i click reply button,then appear modal with some inputs to response my customer complaints.
<div id="modal">
<textarea placeholder=""response></textarea>
<button ng-click="submit()">Reply</button>
</div>
i want to update based of feedback id, and again, what the best practice how to do it?

You can pass the customer object with showModal call.
<div class="parent" ng-repeat="customer in customers">
<h2>{{customer.id}}</h2>
...
<button ng-show="!{{customer.is_answered}}" ng-click="showModal(customer)">Reply</button>
</div>
Inside your controller, save this passed in customer. Once modal closed, update is_answered property of that customer.
$scope.showModal = function (customer) {
var selected_customer = customer;
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
customer: customer
});
modalInstance.result.then(function () {
selected_customer.is_answered = true;
}
};

Found my solution, based on Pass input value to $mdDialog.
vm.showModal = function(e, message) {
$mdDialog.show({
clickOutsideToClose:true,
// locals:{ name: 'Bob'},
controller: function ($mdDialog) {
var vm = this;
vm.message = {};
vm.message = message;
$scope.hide = function () {
$mdDialog.hide();
};
$scope.cancel = function () {
$mdDialog.cancel();
};
},
controllerAs: 'modal',
templateUrl: 'feedbackForm.html',
parent: angular.element(document.body),
targetEvent: e,
});
};
In my view :
<h5 style="">{{modal.message.id}}</h5>
Thank you guys

Angularjs transform array from input checkbox

I have multiple input checkboxs created from a model with angular using ng-repeat, when I select some of them I get this:
var accounts = [AA764: true, AA324: true, AA234: false, AA553: true, AA7365: false];
But I need following structure to manipulate in controller that calls and REST API:
var accounts = ['AA764', 'AA324', 'AA553'];
This is the way I obtain the array to be converted:
<span><i class="pe-7s-trash"></i> Eliminar</span>
<tbody ng-repeat="account in reconcileBankAccounts">
<tr>
<td><input type="checkbox" ng-model="asobancariaAccounts[account.accountBankId]"> {{account.accountName}}</td>
<td>{{account.paymentMethodMain}}</td>
<td><i class="pe-7s-pen"></i> Editar</td>
</tr>
</tbody>
In the Controller:
$scope.deleteAsobancariaAccountModalDialog = function (asobancariaAccounts) {
console.log(asobancariaAccounts); // [AA764: true, AA324: true, 'AA234': false, 'AA553': true, 'AA7365': false]
var modalInstance = $modal.open({
templateUrl: SECURE_CONSTANTS.VIEWS + SECURE_CONSTANTS.MODALS.DELETE_ASOBANCARIA_ACCOUNTS,
size: 'md',
keyboard: true,
controller: 'asobancariaCreateController',
scope: $scope,
resolve: {
asobancariaAccount: function(){
asobancariaAccounts.action = "delete";
return asobancariaAccounts;
}
}
});
};
Just those checkbox that are selected, I have tried with the javascript foreach function but I cannot make it work. Is there any library for angular or maybe with bower that can help me? Thanks.

You can try using ng-true-value.
Read more information in: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

AngularJS - Pass object data into modal

I have an information screen in which I'm using a repeater to build out information on a specific user.
When the "Edit" button is clicked, how can I pass the specific user object data into the modal window template?
HTML
<form class="custom" ng-controller="DepCtrl" ng-cloak class="ng-cloak">
<fieldset ng-repeat="object in data.dataset">
<legend><span>{{ object.header }}</span><span class="dep_rel">({{ object.relation }}) </span></legend>
<div class="row">
<div class="four columns" ng-repeat="o in object.collection.inputs">
<span class="table_label">{{ o.label }}:</span><span class="table_answer">{{ o.value }}</span><br>
</div>
</div>
<div class="row">
<a ng-click="openDialog('edit')" style="color:#444;text-decoration:none;margin-right:10px;margin-top:5px;" class="btn_gray smaller left" href="#">Edit</a>
<a style="color:#444;text-decoration:none;margin-top:5px;" class="btn_gray smaller" href="#">Delete</a>
</div>
</fieldset>
</form>
JS
function DepCtrl($scope, Dependents, $dialog) {
$scope.data = Dependents;
var t = '<div class="modal-header">'+
'<h3>' + $scope.header.value + '</h3>'+
'</div>'+
'<div class="modal-body">'+
'<p>Enter a value to pass to <code>close</code> as the result: <input ng-model="result" /></p>'+
'</div>'+
'<div class="modal-footer">'+
'<button ng-click="close(result)" class="btn btn-primary" >Close</button>'+
'</div>';
$scope.opts = {
backdrop: true,
keyboard: true,
dialogFade: true,
backdropClick: false,
template: t, // OR: templateUrl: 'path/to/view.html',
controller: 'TestDialogController'
};
$scope.openDialog = function(action){
var d = $dialog.dialog($scope.opts);
//if (action === 'edit') { $scope.opts.templateUrl = '../../modal.html'; }
d.open().then(function(result){
if(result)
{
alert('dialog closed with result: ' + result);
}
});
};
}

It helps to know which $dialog service you are referring to exactly, since $dialog is not the part of core AngularJS API.
Assuming that you are using the $dialog service from the ui-bootstrap, you can pass your user object into the dialog controller through the resolve property of $dialog configuration object.
As the $dialog documentation states it:
resolve: members that will be resolved and passed to the controller as
locals
function DepCtrl($scope, Dependents, $dialog) {
$scope.data = Dependents;
$scope.opts = {
backdrop: true,
keyboard: true,
dialogFade: true,
backdropClick: false,
template: t, // OR: templateUrl: 'path/to/view.html',
controller: 'TestDialogController',
resolve: {
user: function(){
return $scope.data;
}
}
};
$scope.openDialog = function(action){
var d = $dialog.dialog($scope.opts);
d.open();
};
}
/**
* [TextDialogController description]
* #param {object} $dialog instance
* #param {mixed} user User object from the resolve object
*/
function TextDialogController(dialog, user){
...
}