AngularJs - NG-模型在SELECT

问题：

我有我的页面，该页面与ng-repeat填充于SELECT元素。它也有一个ng-model它有一个默认值。

当我更改值时，ng-model适应，没关系。但是下拉列表在启动时显示一个空槽，在那里它应该选择具有所选默认值的项目。

代码

<div ng-app ng-controller="myCtrl"> 
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit"> 
     <option ng-repeat="item in units" ng-value="item.id">{{item.label}}</option> 
    </select> 
</div>

随着JS：

function myCtrl ($scope) { 
    $scope.units = [ 
     {'id': 10, 'label': 'test1'}, 
     {'id': 27, 'label': 'test2'}, 
     {'id': 39, 'label': 'test3'}, 
    ] 

     $scope.data = { 
     'id': 1, 
     'unit': 27 
     } 

};

来源

2015-05-05 Jordumus

您可以使用ng-selected指令的选项元素。需要表达的是，如果truthy将设置选定的属性。

在这种情况下：

<option ng-selected="data.unit == item.id" 
     ng-repeat="item in units" 
     ng-value="item.id">{{item.label}}</option>

演示

angular.module("app",[]).controller("myCtrl",function($scope) { 
 
    $scope.units = [ 
 
     {'id': 10, 'label': 'test1'}, 
 
     {'id': 27, 'label': 'test2'}, 
 
     {'id': 39, 'label': 'test3'}, 
 
    ] 
 

 
     $scope.data = { 
 
     'id': 1, 
 
     'unit': 27 
 
     } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="myCtrl"> 
 
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit"> 
 
     <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option> 
 
    </select> 
 
</div>

来源

2015-05-05 09:16:32

这样做的工作：其他答案在哪里有帮助，但我无法更改数据格式，因为它们在其他地方以及其他情况下也可以使用。这解决了问题，而不会搞乱其他数据。 – Jordumus

['ngSelected']的角度文档（https://docs.angularjs.org/api/ng/directive/ngSelected）表示它不应该与'ngModel'一起使用。 –

试试下面的代码：

在你的控制器：

function myCtrl ($scope) { 
     $scope.units = [ 
     {'id': 10, 'label': 'test1'}, 
     {'id': 27, 'label': 'test2'}, 
     {'id': 39, 'label': 'test3'}, 
     ]; 

    $scope.data= $scope.units[0]; // Set by default the value "test1" 
};

在你的页面：

<select ng-model="data" ng-options="opt as opt.label for opt in units "> 
       </select>

Working Fiddle

来源

2015-05-05 09:11:22 carton

这是一个很好的解决方案，但它不会帮助我，因为我无法更改数据的格式。我在未来的版本中复制了片段以供其他情况下使用！ – Jordumus

如何以HTML格式显示数据绑定选择了哪个选项？ –

@StephenKuehl您必须使用所需的选定值设置您的模型（var传递给ngModel）。 – Disfigure

选择的默认值应该是在列表中的值之一。为了加载选择默认值，您可以使用ng-options。需要在控制器中设置范围变量，并且该变量在HTML的选择标签中被指定为ng-model。

查看此plunker任何引用：

http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview

来源

2015-05-05 09:47:03

你不需要定义选项标签，你可以做到这一点使用ngOptions指令：https://docs.angularjs.org/api/ng/directive/ngOptions

<select class="form-control" ng-change="unitChanged()" ng-model="data.unit" ng-options="unit.id as unit.label for unit in units"></select>

来源

2015-05-05 09:54:56 Numyx

这个解决方案令人讨厌的部分是ng-model将目标设置为你在ng选项中重复的内容。 Theres没有办法设置到重复的字段（如id）。 – Sam

然而，ngOptions提供了一些优点，例如通过不为每个重复实例创建新范围来减少内存和提高速度。 angular docs

替代解决方案是使用ng-init指令。您可以指定将初始化您的默认数据的函数。

$scope.init = function(){ 
      angular.forEach($scope.units, function(item){ 
       if(item.id === $scope.data.unit){ 
        $scope.data.unit = item; 
       } 
      }); 
     }

见jsfiddle

来源

2015-05-05 09:58:08

你也可以把该项目与选择出像后续的NG-重复的默认值：

<div ng-app="app" ng-controller="myCtrl"> 
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit"> 
     <option value="yourDefaultValue">Default one</option> 
     <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option> 
    </select> 
</div>

，不要忘记，如果你的价值属性附加伤害保持空白，你将会遇到同样的问题。

来源

2016-05-11 09:39:43

AngularJs - NG-模型在SELECT

回答

相关问题