javascript - angularjs选择框设置对象值

Question

这是我的 Angular

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

Answer 1

重复选项不是显示选择下拉列表的首选方式。我建议您使用 ng-options 指令来获取 ng-model 上的对象绑定(bind)

<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

<小时/>

对如下所示的 Angular Material 使用 md-select ，并使用 ng-model-options="{trackBy: '$value.proId' 直接预选择对象。此外，在定义 ng-model 时，您必须遵循Dot Rule

标记

<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