Search code examples
angularjsangularjs-ng-repeatangular-ngmodel

Get ng-model value from inside ng-repeat using ng-change


Guys I am new to angular and having problems getting value of ng-model from inside ng-repeat.

I have an array of users, and I want to appoint users with different access levels

users = [
{id:1, level:0},
{id:2, level:0},
{id:3, level:0}
]

This is the HTML

<div ng-repeat="user in users track by $index">
{{user.id}}-
<select name="appoint" ng-change="appoint(user.id)" ng-model="appointLevel">
   <option value=0>Revoke</option>
   <option value=1>Moderator</option>
   <option value=2>Admin</option>
 </select>
</div>

The appoint() function in angular:

$scope.appoint = function(id){
    console.log(id+' '+appointLevel)
  }

The function is working fine and I am getting value of id but not `appointLevel' of the input element that has triggered that function.

How can I get the value console.log(id+' '+appointLevel) efficiently on `ng-change'? Thanks in advance.


Solution

  • Use

    <select name="appoint" ng-change="appoint(user.id, appointLevel)" ng-model="appointLevel">
    

    and

    $scope.appoint = function(id, appointLevel) {
        console.log(id + ' ' + appointLevel);
    }
    

    You can't access appointLevel from the JS function directly, because it's in the scope of the ng-repeat, which is a child scope of the controller scope (i.e. $scope).

    Working plunker

    Or you could store the appointLevel in the user itself:

    <select name="appoint" ng-change="appoint(user)" ng-model="user.appointLevel">
    

    and

    $scope.appoint = function(user) {
        console.log(user.id + ' ' + user.appointLevel);
    }