angularjs选择框设置对象的值

问题描述：

angular.module("myApp",[]) 
.controller("myCtrl",function($scope){ 
    $scope.projectObj = {"proId":"33","proName":"samal"} 
    $scope.projectArr = [{"proName":"samal","proId":"33"},{"proName":"aaa","proId":"47"},{"proName":"sdf","proId":"48"},{"proName":"sdf","proId":"49"},{"proName":"sddd","proId":"50"},{"proName":"dddd","proId":"51"},{"proName":"ttt","proId":"52"},{"proName":"sdf","proId":"53"},{"proName":"sdf","proId":"54"},{"proName":"sdf","proId":"55"},{"proName":"sdf","proId":"56"},{"proName":"sdf","proId":"57"},{"proName":"sdf","proId":"58"},{"proName":"sdf","proId":"59"},{"proName":"sdf","proId":"60"}] 
})

这是我的选择框

<select ng-model="projectObj"> 
    <option value="{{item}}" ng-repeat="item in projectArr">{{item.proName}}</option> 
</select>

$ scope.projectObj已经与分配对象，它已经内$ scope.projectArr。什么是想要的是当我加载HTML文件$ scope.projectObj proName应该预选。我可以做到这一点。这是我的pluker

检查我的答案，它工作。 –

答

重复options不是显示选择下拉菜单的首选方式。我建议你使用ng-options指令来获得ng-model

<select flex ng-model="projectObj" 
    ng-options="item as item.proName for item in projectArr"> 
</select>

对象绑定，然后从projectArr分配projectObj。

$scope.projectObj = $scope.projectArr[0];

Demo here

使用md-select像下面角材料和用于使用ng-model-options="{trackBy: '$value.proId'直接预先选择对象。此外，你必须遵循Dot Rule当定义ng-model

标记

<md-input-container> 
    <md-select ng-model="projectObj" placeholder="Select a state" 
    ng-model-options="{trackBy: '$value.proId'}"> 
    <md-option ng-value="item" ng-repeat="item in projectArr"> 
     {{ item.proName }} 
    </md-option> 
    </md-select> 
</md-input-container>

CodePen

事情是我使用角材料设计为我的应用程序。当我使用ng选项，它不支持材料 –

@ IT13122256RanawakaR.ASM看看更新后的答案请 –

我想删除这个'$ scope.projectObj = $ scope.projectArr [0];'并且只能像这样使用' $ scope.projectObj = {“proId”：“33”，“proName”：“samal”}'。那么它不工作是这样的。两者都是在我的知识相同 –

答

可以使用NG-选择。这将工作。

<option value="{{item}}" ng-selected="item" ng-repeat="item in projectArr">{{item.proName}}</option>

angularjs选择框设置对象的值

相关推荐