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

angular-ngmodelangularjsangularjs-ng-repeat

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.

Best Answer

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);
}
Related Topic