user3288891 user3288891 - 4 years ago 112
AngularJS Question

access selected option value outside scope of ng-repeat

I'm trying to access option value outside of ng-repeat scope .
here is jsFiddle

If you look at it, i can access id but not name. How can I access name outside scope of ng-repeat.

<div ng-controller="csrClrt">
<md-input-container>
<label>Face Style:</label>
<md-select ng-model="style" ng-change="f_style()">
<md-option ng-value="user.id" ng:repeat="user in styles">{{user.name}}</md-option>
</md-select>
</md-input-container>
<div>
Id:{{style}}
<br/> Want to Display Name {{name}}
</div>
</div>


angularJS

angular.module('MyApp', ['ngMaterial'])
.controller('csrClrt', function ($scope) {

stylesdata=[{name:"a",id:0},{name:"b",id:1},{name:"c",id:3}];
var style=[];
for(var i=0;i<stylesdata.length;i++)
{
style.push({
name:stylesdata[i].name,
id:stylesdata[i].id
})
}
$scope.styles=style;
})

Answer Source

Just use ng-value="user" instead of ng-value="user.id" and add ng-model-options="{trackBy: '$value.id'}" to handle deep equality:

<md-select ng-model="style" ng-change="f_style()" ng-model-options="{trackBy: '$value.id'}">
  <md-option ng-value="user" ng:repeat="user in styles">{{user.name}}</md-option>
</md-select>

Working fiddle: https://jsfiddle.net/ohotng3f/2/

Also, see corresponding section in angular material documentation for reference

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download