angularjs - Setting $scope.myModel element with ng-change enters in infinite loop -
i'm pretty new angular , trying achieve "basic". i've been googling 2 days without success , appreciate help.
i have html page on i'm trying to:
- initialize data http post request
- call function via ng-change event update data http post when elements used filters changed (i.e. categories, sorting asc/desc...)
my problem when i'm updating model programmatically http response (only in case), triggers ng-change event attached element, calls update function , enters in infinite loop: ng-change -> updating function -> ng-change -> updating function
note: i'm using angular material template doesn't change code
html
<html ng-app="myapp"> <body layout="column" ng-controller="searchservicecontroller"> <h1 class="md-headline">filter results</h1> <form name="searchserviceform" novalidate> <md-input-container> <md-select placeholder="choose category" ng-model="searchservice.selectedcategory" ng-change="changedsearchservicecriteria()"> <md-option ng-value="category.value" ng-repeat="category in listofcategories">{{ category.title }}</md-option> </md-select> </md-input-container> <md-input-container> <md-select placeholder="sort by" ng-model="searchservice.sortby" ng-change="changedsearchservicecriteria()"> <md-option ng-value="criteria.value" ng-repeat="criteria in sortbycriterias">{{ criteria.title }}</md-option> </md-select> </md-input-container> </form> <h1 class="md-headline">{{ selectedcategory.title }}</h1> <p class="md-body-1">{{ selectedcategory.description }}</p> </body> </html> js
var app = angular.module('myapp', ['ngmaterial']); app.controller('searchservicecontroller', function($scope, $http, $location) { // initialize data using category id parameter in url $http({ method: 'post', url: '/projets/get-offerings-list', data: {selectedcategory: $location.path().split("/")[4]}, headers: {'content-type': 'application/x-www-form-urlencoded'} }) .success(function(response) { alert('init'); $scope.listofcategories = response.listofcategories; $scope.sortbycriterias = response.sortbycriterias; $scope.searchservice = response.searchservice; }) .error(function(response) { console.log('failure occured'); }); // update data $scope.changedsearchservicecriteria = function() { $http({ method: 'post', url: '/projets/get-offerings-list', data: {selectedcategory: $location.path().split("/")[4]}, headers: {'content-type': 'application/x-www-form-urlencoded'} }) .success(function(response) { alert('update'); $scope.listofcategories = response.listofcategories; $scope.sortbycriterias = response.sortbycriterias; $scope.searchservice = response.searchservice; }) .error(function(response) { console.log('failure occured'); }); }; }); result
init object {listofcategories: array[3], sortbycriterias: array[2], searchservice: object} update object {listofcategories: array[3], sortbycriterias: array[2], searchservice: object} update object {listofcategories: array[3], sortbycriterias: array[2], searchservice: object} update object {listofcategories: array[3], sortbycriterias: array[2], searchservice: object} update object {listofcategories: array[3], sortbycriterias: array[2], searchservice: object} update object {listofcategories: array[3], sortbycriterias: array[2], searchservice: object} ....infinite loop.... this doesn't occur when i'm updating model programmatically without using response of http request. see here: http://plnkr.co/edit/banjr85eaokkvu4dnf1m?p=preview have ideas on how update form element without provoking ng-change event?
thanks
please note not want use workaround using $watch there: ngchange called when model changed programmatically
you should try add working example http://jsfiddle.net/ or similar.
i think @ guess , not tested need keep last search , run update ajax request if changes gets new address (or whatever thats called in js) every time - though same value , re evaluates again
$scope.searchservice = ""; $scope.lastsearch = "" // update data using form elements $scope.changedsearch = function() { if($scope.searchservice != $scope.lastsearch){ $http({ method: 'post', url: '/projects/get-list', data: $scope.searchservice, headers: {'content-type': 'application/x-www-form-urlencoded'} }) .success(function(response) { // request succeeded? display message console.log('update'); console.log(response); // update data $scope.listofcategories = response.listofcategories; $scope.sortbycriterias = response.sortbycriterias; $scope.searchform = response.searchform; }) .error(function(response) { // request failed? display message console.log('failure occured'); }) .complete(function(response) { // after success or error $scope.lastsearch = $scope.searchservice; console.log('complete'); }); } };
Comments
Post a Comment