Question

为了说明这个问题，我创建了两个HTML片段进行比较。第一个按预期将select元素的默认选择设置为“One”。（函数（有角度）{ angular.module（'m'，[]） .run（function（$ rootScope）{ $ rootScope.x = { val：“1” }; }）; }）（window.angular）; ＆LT; HTML＆GT; ＆LT; HEAD＆GT; ＆lt; script src =“// ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> ＆LT; /头＆GT; ＆lt; body ng-app =“m”＆gt; ＆lt; select ng-model =“x.val”＆gt; ＆lt; option value =“0”＆gt; Zero＆lt; / option＆gt; ＆lt; option value =“1”＆gt; One＆lt; / option＆gt; ＆lt; option value =“2”＆gt;两个＆lt; / option＆gt; ＆LT; /选择＆GT; {{ X }} ＆LT; /体＆GT; ＆LT; / HTML＆GT; 我不想将所有选项硬编码到HTML中，因为它们将来可能会发生变化。我正在尝试使用ng-repeat，但是看到默认选择始终设置为“Zero”。有人可以解释它不工作的原因，以及如何解决它？（函数（有角度）{ angular.module（'m'，[]） .run（function（$ rootScope）{ $ rootScope.nums = [“Zero”，“One”，“Two”]; $ rootScope.x = { val：“1” }; }）; }）（window.angular）; ＆LT; HTML＆GT; ＆LT; HEAD＆GT; ＆lt; script src =“// ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> ＆LT; /头＆GT; ＆lt; body ng-app =“m”＆gt; ＆lt; select ng-model =“x.val”＆gt; ＆lt; option ng-repeat =“num in nums”value =“{{$ index}}”＆gt; {{num}}＆lt; / option＆gt; ＆LT; /选择＆GT; {{ X }} ＆LT; /体＆GT; ＆LT; / HTML＆GT;

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>

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

2 个答案: