Develop Reference

AngularJS - Ng-model becomes null after changing view

I have a page called Personal Info page with assigned ng-models.
e.g.
<input type = "text" name = "foo_name" ng-model = "foo.name" />
<input type = "text" name = "foo_address" ng-model = "foo.address" />
<input type = "text" name = "foo_age" ng-model = "foo.age" />
Then, there's a Continue button that redirects to a new page called Other Details.
The Continue button is validating all required fields if filled in. It's also returning a log if all fields are validated - either:
SUCCESS
{result:
{ error: null }
}
FAIL
{result:
{ error:
{
blah blah blah
}
}
}
In the Other Details page, it's just a GRID of the details entered on the previous page. And then, there's an "Edit" button in this page if they wanted to edit something on their personal info.
I'm using ng-model to retrieve the data being stored in the saveDetailsInfo service.
$scope.retrieveData = function(dataFromService) {
$scope.foo = {
name: dataFromService.entry.name,
address: dataFromService.entry.address,
}
}
Then, it's showing nicely and properly on its respective fields. The problem is if I'm trying to hit the "Continue" button again to save my changes. It's returning an error that these fields are already undefined, although the values have been printed and populated on the input fields.
Why has it become null?

I can't recreate the problem...but a quick fix is to check if the value is null on the continue function and if it's null then read the value from the ng-model again(as it's shown in the dom tree) and then using those data to initialize and continue what you need to do with the data.
Many times this happen because the function is initialized before the dom gets it data and hence null...

Filter service in angularjs

I am rewriting an app that uses html, js and php into angular with rest php. I came across an issues regarding filters. In the actual form i have dropdowns that are populated ajax by js from php. The config in the js is made something like
form = new form('user-page');
form.ajaxselects = [ ['UserID', {table: 'users', DefaultValue: 5} ] ]
form.construct();
function form(formName) {
var this.ajaxselects;
function construct() {
foreach (this.ajaxselects as ajaxselect) {
$.post( ajaxselect[0], { Action:'get' },
function( data ) {
// exemplification, not real code
$(this).select(ajaxselect[0]).values = data;
}, 'json'
);
}
}
EDIT:
How it currently works with js:
I instantiate an object, called form and in that form i configure all my elements. Dropdowns, field validations etc.
After i configure (the configuration means that i say for a dropdown where to take the value from the server, what is the default value etc), for a validation i say what's the rule (it's mandatory, it's decimal).
And then when i run a function on the form object i go for each dropdown and populate it, add events validate the inputs etc.
I would like to know if i can and if yes, how, to build something like this in angular. To give to a service let's say a set of rules, something like:
['user_id', http_request:'server.com/api/populate/user_id', default_Value:1] and then i get the dropdown for users populated with the values. I don't know how to explain it better.

exposing angularjs grid data from one controller into another

I'm trying to push data from a link within my grid data UI, when you click the link, open a popup (which I do with a modal fine) however when the modal opens, I can't access any of the data that was defined in the other controller.
This snippet:
<a href ng-click="grid.appScope[col.field](row.entity)">Popup</a>
Works fine, where it shows the col.field value, however I'd like to show data within the popup from grid.appScopecol.field in the popup - however that is another controller, how would I handle passing data from one controller to another within this format?

My suggestion is just pass those data into angular service define a service like
angular.service('MyService', function() {
//if you want Object format or
this.controller1Data = {};
//if you want array format
this.controller1Data = {};
});
in your controller just pass the data into that service like
//In controller
MyService.controller1Data = //Pass the data to that service;
then in HTMl
<a href ng-click="//call that method()">Popup</a>

Angular select multiple not refreshing on model change

I have the following issue with angular and the html select-input:
When the user loads the page my select is empty until the data is loaded and returned from the corresponding service.
In this case the select is populated correctly.
However, the user should be able to filter the model with a click on a button.
When I press the button a new request is send to the REST-API and the response contains the new model for the select.
Unfortunately, the select won't update correctly even when I change it's model
Here is some code to illustrate my problem:
// This happens in my controller
EventService.getAvailableRooms(requestObject).then(function successCallback(response){
// sanatizeRoomTypes is used to generate user-friendly names instead of [1, 2,..]
vm.rooms = DataSanatizer.sanatizeRoomTypes(response.data);
}, function errorCallback(response){
console.log(response)
});
vm.rooms is the model of my select:
<select id="roomSelect" ng-model="eventCtrl.selectedRooms"
ng-options="room.name group by room.type for room in eventCtrl.rooms track by room.id" multiple required>
</select>
In some cases the select duplicates it's model or looses entries. It seems like there is some sort of data binding problem.
Thanks,

Try wrapping your model changes in $scope.apply :
$scope.$apply(function() {
$scope.data.myVar = "Another value";
});
Read here for more info:
http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
You can also use $scope.$watch on the changing $scope variables to update them in your view.

jqgrid keeps custom post parameters on reload

So I have a date picker and a select-list. Then a jqgrid, working fine, filtering and all. This is what I am doing.
$("#sessSearch").unbind('click').on('click', function(){
var mydate = $("#sessSelector").val();
var mytype = $("#sess_type :selected").val();
if(mydate && mytype){
$("#listSESS").jqGrid('setGridParam',{postData:{sess_date:mydate, sess_type:mytype}}).trigger("reloadGrid");
}else{
alert("The search form is incomplete");
}
$("#sessSelector").val('');
$("#sess_type").val('');
});
What is happening there is I am sending along the values of my selectlist and datepicker along in the postData for the jqgrid. Only when the search button is clicked. So far so good. I can get the values on the serverside. The problem is when I click the refresh button on the grid pager, the previously sent paramiters remain in the postData. See below, firebug showing all post parameters.
The first is a normal default load, works fine.
The second happens after using my search form and adding to the postData and then I clicked on the refresh button the grid pager.
How do I reset the postData for the grid native reload mechanism to exclude my custom parameters?
My custom paramiters must only go in when I tell it to go in.
Please advise.

You can use getGridParam to get reference on internal object postData. The object have properties sess_date and sess_type with the values from the last setGridParam call. One can use delete to remove property from an object. So the following code should work
var postData = $("#listSESS").jqGrid("getGridParam", "postData");
delete postData.sess_date;
delete postData.sess_type;

Thank you so much Oleg, I basically disabled the default refresh action and did this with the pager. So my custom search sends the parameters only when my search mutton is clicked.
jQuery("#listSESS").jqGrid('navGrid','#pagerSESS',{edit:false,add:false,del:false,search:false, refresh:false},
{}, // edit options
{}, // add options
{}, // del options
{} // search options
);
$("#listSESS").jqGrid('navButtonAdd', "#pagerSESS", {
caption: "", title: "Reload Grid", buttonicon: "ui-icon-refresh",
onClickButton: function () {
var mypostData = $("#listSESS").jqGrid("getGridParam", "postData");
delete mypostData.sess_date;
delete mypostData.sess_type;
$("#listSESS").jqGrid('setGridParam',{postData:mypostData}).trigger("reloadGrid");
}
});
works like a charm.