Question

控制器

$scope.industries= [
 {
  id: 1,
  name: "Name1", 
 }, {
  id: 2,
  name: "Name2"
 }
];

在控制器中分配$scope.filling_type = 2时，我想选择“ Name2” 选择中的选项。

查看

<select ng-model="filling_type">
  <option ng-repeat="industry in industries"
  ng-value="industry.name">{{industry.name}}</option>
</select>

在这种情况下，未选择任何选项。

Answer 1

由于增强的灵活性和性能，我建议您习惯于在select元素中使用ng-options而不是在option元素中使用ng-repeat。 https://docs.angularjs.org/api/ng/directive/select#choosing-between-ngrepeat-and-ngoptions-

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.industries= [
 {
  id: 1,
  name: "Name1", 
 }, {
  id: 2,
  name: "Name2"
 }
];

$scope.filling_type = 2; // set default option here, using 2 from OP
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<select 
    ng-model="filling_type"
    ng-options="i.id as i.name for i in industries"> 
</select>
<p>Filling Type: {{filling_type}}</p>
</body>

Answer 2

由于将名称绑定为值，因此应将name属性设置为 filling_type

演示

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.industries= [
 {
  id: 1,
  name: "Name1", 
 }, {
  id: 2,
  name: "Name2"
 }
];

$scope.filling_type = "Name2";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<select ng-model="filling_type">
  <option ng-repeat="industry in industries"
  ng-value="industry.name">{{industry.name}}</option>
</select>
</body>

AngularJS选择不显示所选值

2 个答案: