访问ng-repeat范围之外的选定选项值

时间:2017-02-01 15:32:59

标签: angularjs angular-material

我正在尝试访问ng-repeat范围之外的选项值。 这是jsFiddle

如果你看一下,我可以访问id而不是name。如何访问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;
})

1 个答案:

答案 0 :(得分:1)

只需使用ng-value="user"代替ng-value="user.id"并添加ng-model-options="{trackBy: '$value.id'}"即可处理深度相等:

<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>

工作小提琴:https://jsfiddle.net/ohotng3f/2/

另请参阅相应的in angular material documentation部分以供参考