代码之家 › 专栏 › 技术社区 › Maris

NG选项在初始加载时不突出显示选定值

ng-options angularjs

Maris · 技术社区 · 6 年前

考虑下一个代码示例:

http://plnkr.co/edit/LA6fu1vdzRWFaQw6Zl6S?p=preview

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="main">
  <select novalidate="" ng-model="selectedItem" ng-options="item.id as item.name for item in items track by item.id"> </select>
</body>

</html>


var app = angular.module('app', [])

.controller('main', ['$scope',function($scope) {
  $scope.items = [
    {"id":0,"name":"a"},
    {"id":1,"name":"b"},
    {"id":2,"name":"c"},
    {"id":3,"name":"d"}
  ];
  $scope.selectedItem = 1;
}])

我希望在初始荷载下,select元素将有一个“b”选项被选中,但它没有。我做错了什么?

1 回复 | 直到 6 年前

Aleksey Solovey 6 年前

你需要:

使用更新版本的angularjs(更改 1.1.5 到 1.6.10 在你的剧本里)
去除 track by item.id ,用于 ng-repeat 不是 ng-options

下面是一个工作演示:

var app = angular.module('app', [])

.controller('main', ['$scope',function($scope) {
  $scope.items = [
    {"id":0,"name":"a"},
    {"id":1,"name":"b"},
    {"id":2,"name":"c"},
    {"id":3,"name":"d"}
  ];
  $scope.selectedItem = 1;
}])

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.js"></script>
  </head>

  <body ng-controller="main">
    <select novalidate=""
      ng-model="selectedItem" 
      ng-options="item.id as item.name for item in items">
    </select>
    {{selectedItem}}
  </body>
</html>

推荐文章

Edoardo · AngularJS使用ng选项选择

7 年前

Mike Anderson · AngularJs-从集合属性设置ng模型

7 年前

Green Computers · 如何在angular 1中同时使用ng if和ng选项

7 年前

saher · AngularJs:鼠标悬停到使用ng选项的下拉列表的单个值时的工具提示

8 年前

Devner · 更改选项不会在AngularJS中显示选项标签/文本

9 年前

David says Reinstate Monica · 使用对象表示法获取所选ng选项的标签

9 年前

paulhhowells · 当Angular正确更新模型时,为什么不通过在ng选项中的<option>标记中添加“selected”属性来更新DOM?

9 年前

camiel · 无法删除带有ng选项的空白选项

10 年前

Yes Webs · 如何在Angularjs中停止ng选项重复

10 年前

Kiwi · AngularJS ng选项获取索引

10 年前