angularjs选择框设置对象值

angularjs select box set object value

本文关键字：对象 设置 选择 angularjs      更新时间：2023-09-26

这是我的角度

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应该是预先选择的。我该怎么做呢。这是我的plucker

重复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];

此处演示

将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

您可以使用选定的ng。这会奏效的。

<option value="{{item}}" ng-selected="item" ng-repeat="item in projectArr">{{item.proName}}</option>
相关文章：