使用ngRepeat <select>选择第一个元素时不要选择项目

时间:2016-12-06 18:15:23

标签: angularjs angularjs-ng-repeat angularjs-select

我在使用ngRepeat和ngSelected里面&lt; select&gt;时遇到问题标签,这是代码: &lt; select ng-model =&#34; y.SkuId&#34; NG-变化=&#34; y.Edited =真;&#34;&GT;     &lt; option ng-repeat =&#34; s skus&#34; ng-selected =&#34; s.Key == y.SkuId&#34;值=&#34; {{s.Key}}&#34;&GT; {{s.Value}}     &LT; /选项&GT; &LT; /选择&GT; 当所选项目不是第一项时,这可以正常工作,但当所选项目是第一项时,输出错误,而不是html看起来不错 &lt; option ng-repeat =&#34; s skus&#34; ng-selected =&#34; s.Key == y.SkuId&#34; 值=&#34; 1&#34; class =&#34; ng-binding ng-scope&#34;选定=&#34;选择&#34;&GT; 001 注意:数字是值(不是索引) 更新 现在我注意到,只有当选项中的最后一项具有ngSelected等于true时,浏览器才会显示正常 这是skus数据: [{&#34; Key&#34; :1,&#34;价值&#34; :&#34; 001&#34; },{&#34; Key&#34; :2,&#34;价值&#34; :&#34; 002&#34; }] 更新2 plnkr有错误的例子 http://plnkr.co/edit/g8hRHzt1k54ingQdMHHY?p=preview

2 个答案:

答案 0 :(得分:2)

尝试在 select 元素中使用 ngOptions 而不是 ngRepeat 指令:

<select ng-model="d.SkuId"
        ng-options="s.Key as s.Value for s in skus">
</select>

plunker:http://plnkr.co/edit/TQIxqSv9ZBleLeA2h6WQ?p=preview

答案 1 :(得分:1)

使用ng-attr-value="s.Key"代替value="{{s.Key}}"

尝试plnkr

注意差异只是值:

<select ng-model="k.Key" >
  <option ng-repeat="s in skus" ng-selected="s.Key === k.Key" 
     ng-attr-value="s.Key">{{s.Value}}</option>
</select>

使用{{}}的表达式评估时间和ng-repeat编译时间并不像人们想象的那样同步。这解释了为什么只选择了最后一个。

虽然根据official documentation - choosing between ng-options and ng-repeat你可以使用ng-repeat来表示ng-options,但是当你处理对象而不是ID时,你可能想要使用select as语法。此外,还有其他性能原因可能会导致您这样做。