ng-selected 不适用于 ng-repeat 设置默认值

设置默认值

关注

发信

关注(28)粉丝(399)

ng-selected 不适用于 ng-repeat 设置默认值

本文介绍了ng-selected 不适用于 ng-repeat 设置默认值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试设置选项的默认值我正在使用选择和 ng-repeat.我确实在 js 文件中获取数据，并且我确实调用模型在那里设置值.

请查看以下代码:

<html lang="zh-cn"><头><meta charset="UTF-8"><title>示例 - example-ngrepeat-select-production</title><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script><script src="app.js"></script><body ng-app="ngrepeatSelect"><div ng-controller="示例控制器"><表单名称="myForm"><label for="repeatSelect">重复选择:</label><选择 ng-model="数据模型"><option ng-repeat="数据中的数据项"ng-selected ="{{dataitem == datamodel}}">{{dataitem}}</option></选择></表单><小时><tt>repeatSelect = {{datamodel}}</tt><br/>

</html>

app.js 文件

(函数(角度){'使用严格';angular.module('ngrepeatSelect', []).controller('ExampleController', ['$scope', function($scope) {$scope.data = [1,2,3,4,5];$scope.datamodel = 2;}]);})(window.angular);

这是我的 plunker

解决方案

来自 angular docs:

请注意，不使用 ngOptions 的 select 指令的值是总是一个字符串.当模型需要绑定到非字符串时值，您必须使用指令显式转换它(请参阅下面的示例)或使用 ngOptions 指定选项集.这是因为选项元素只能绑定到字符串值存在.

因此将 $scope.datamodel = 2; 更改为 $scope.datamodel = '2'; 有效.查看更新的plunker.

然而，最好使用 ngOptions 代替.再次，来自文档:

在许多情况下，ngRepeat 可以用于元素而不是ngOptions 来实现类似的结果.但是，ngOptions 提供一些好处，例如的模型如何更灵活通过 select 作为理解表达式的一部分分配，以及另外通过不创建一个减少内存和提高速度每个重复实例的新范围.

所以为了保持你的模型为整数，你可以使用:

<option value="">请选择</option></选择>

参见 plunker

I am trying to set default value of optionsI am using select and ng-repeat. I do get data in js file and I do call model to set value there.

Please have a look for below code :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngrepeat-select-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
  <script src="app.js"></script>



</head>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select  ng-model="datamodel">
      <option ng-repeat="dataitem in data"
                ng-selected ="{{dataitem == datamodel}}">{{dataitem}}</option>
    </select>
  </form>
  <hr>
  <tt>repeatSelect = {{datamodel}}</tt><br/>
</div>
</body>
</html>

app.js file

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = [1,2,3,4,5];

    $scope.datamodel = 2;
 }]);
})(window.angular);

Here is my plunker

解决方案

From the angular docs:

So changing $scope.datamodel = 2; to $scope.datamodel = '2'; works. See updated plunker.

However, it's better to use ngOptions instead. Again, from the docs:

So to keep your model as an integer, you can rather use:

<select  ng-model="datamodel" ng-options="dataitem for dataitem in data">
  <option value="">Please Select</option>
</select>

See plunker

这篇关于ng-selected 不适用于 ng-repeat 设置默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-23 06:02