CODEWITHSUNDEEP
angularjsselectionic-frameworkcontrollerangularjs-ng-change
DaViDa
DaViDa

Reputation: 641

ng-change not working with asynchronous controller logic

So I have a controller with a couple of asynchronous .then functions. In the end I catch them all with a $q.all() function to continue my synchronous work. Now I have a select with dynamic options:

 <select ng-model="data.selectedUser" ng-change="changeList()" ng-options="user as user.firstname + ' ' + user.lastname for user in users">
    <option value="">Select a user...</option>
  </select>

With ng-change I want to get the selected user in my controller, so I call changeList(). In the changeList function I do some simple alerts which do not trigger. When I do the test alert first in the controller it even freezes at choosing an option.

In my $q.all() function:

    $q.all(promises).then(function () {
          users = UserService.getUsers();
          $scope.users = users;
          $scope.data.selectedUser = {};

          $scope.changeList = function () {
            var chosenUser = $scope.data.selectedUser;
            alert(chosenUser.firstname);
            alert('test');
          };

        }, function () {
          alert('Failed');
        });

The alerts do nothing, I also tried putting the changeList function out of the $q.all function in the bottom of the controller. What am I doing wrong?

EDIT: user is already defined and all of that is working. It is purely about why the ng-change is not working. It is also tested without emptying the selectedUser scope first.

Upvotes: 0

Views: 766

Answers (2)

Adrien SAMBRES
Adrien SAMBRES

Reputation: 51

Here is a JSFiddle that uses your code and does work:

http://jsfiddle.net/A_Sambres/2kwhw0dw/1/

The things there that must be different from your code are the users object

  users = [{"firstname":"Adrien","lastname":"Foo"}, ...{"firstname":"Thing2","lastname":"Foo"}];

, and the initialization of the data object.

 $scope.data = {selectedUser : {}};

So I guess you could inspect the differences between this code and yours to spot what goes wrong. It may be the users object that has not the right structure, or the $scope.data that is not correctly declared in the controller.

Upvotes: 0

Oliver Moolman
Oliver Moolman

Reputation: 488

The it does not look like ng-change works on a select. You can have a look at this js-fiddle: http://jsfiddle.net/fc984j9b/

Instead of using the ng-change to fire the event I used a $watch on the ng-model of the select to trigger a function instead, in your case it would be:

$scope.$watch("data.selectedUser", function(){
     $scope.changeList();
});

I hope hat helps

Best Regards

Oliver

Upvotes: 2

Related Questions