无法设置默认选择 <select>角度js中的元素

Question

为了说明问题，我创建了两个HTML代码段进行比较。 第一个将预期的选择元素的默认选择设置为“一个”。

 (function(angular) { angular.module('m', []) .run(function($rootScope) { $rootScope.x = { val: "1" }; }); })(window.angular);

 <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> </head> <body ng-app="m"> <select ng-model="x.val"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> </select> {{ x }} </body> </html>

我不想将所有选项硬编码到HTML中，因为它们将来可能会更改。 我正在尝试使用ng-repeat，但是看到默认选择始终设置为“零”。 有人可以解释为什么它不起作用以及如何解决它吗？

 (function(angular) { angular.module('m', []) .run(function($rootScope) { $rootScope.nums = ["Zero", "One", "Two"]; $rootScope.x = { val: "1" }; }); })(window.angular);

 <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> </head> <body ng-app="m"> <select ng-model="x.val"> <option ng-repeat="num in nums" value="{{ $index }}">{{ num }}</option> </select> {{ x }} </body> </html>

Answer 1

使用正确的ngOptions语法应该可以解决此问题：

 (function(angular) { angular.module('m', []) .run(function($rootScope) { $rootScope.nums = ["Zero", "One", "Two"]; $rootScope.x = { val: "One" }; }); })(window.angular);

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> <div ng-app="m"> <select ng-model="x.val" ng-options="num as num for num in nums"></select><br /> selected value: {{ x.val }} </div>

Answer 2

这是另一种解决方案。

 (function(angular) { angular.module('m', []) .run(function($rootScope) { $rootScope.nums = ["Zero", "One", "Two"]; $rootScope.x = $rootScope.nums[1]; // Index position of One }); })(window.angular);

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> <div ng-app="m"> <select ng-model="x" ng-options="num as num for num in nums"></select><br /> selected value: {{ x }} </div>

无法设置默认选择 <select>角度js中的元素

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-07-16 20:09:56

解决方案2
0 2015-07-16 20:27:26

无法设置默认选择 <select>角度js中的元素

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-07-16 20:09:56

解决方案2 0 2015-07-16 20:27:26

解决方案1
0 已采纳 2015-07-16 20:09:56

解决方案2
0 2015-07-16 20:27:26