Question

我想使用ng-init，ng-model等为我的ng-options设置默认值。他们根本没有工作。我的代码如下：

角

var app = angular.module('role', []);

app.controller('fooController', function($scope){
    $scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}];
    $scope.user.roles = $scope.roles[0];
});

HTML

<body data-ng-app="role" data-ng-controller="fooController">
  <select multiple class="form-control" data-ng-model="user.roles" data-ng-options="role.name for role in roles" required=""></select>
</body>

这是我的Plunkr. 任何帮助，将不胜感激。

Answer 1

<强>更新

如果您想直接查看本答案中使用的参考文献，请点击此处：

参考：   Initial Selection In AngularJS ng-options with track by

这对我有用：

app.controller('fooController', function($scope){
    $scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}];
    $scope.user = {};
    $scope.user.roles = [ $scope.roles[0] ];
});

user未初始化的插件出错，除此之外，Angular会将ng-options数组中的每个对象与ng-model中的每个元素进行比较阵列。 JavaScript比较不是Angular比较，比较两个对象，即使JavaScript中具有相同的属性，也会返回false（不同的对象）。

普兰克：http://plnkr.co/edit/ccsAVvPACnN6Qzje7HcB?p=preview

现在，这并不理想。通常，您希望基于ID左右来关联这些，这是另一种方式：

在HTML中，使用track by告诉AngularJS比较ID而不是整个对象：

  <select multiple class="form-control" 
    data-ng-model="user.roles" 
    data-ng-options="role.name for role in roles track by role.id" 
    required=""></select>

然后在你的控制器中，你可以使用任何对象而不是实际存在于数组中：

app.controller('fooController', function($scope){
    $scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}];
    $scope.user = {};
    $scope.user.roles = [ {id:1, name:"Administrator"} ];
});

普兰克：http://plnkr.co/edit/NKLXrwqwk36YfhBSXILN?p=preview

请注意，我甚至不需要name属性。它只是为了以后制作一个合适的物体，但现在不需要进行匹配，没有它就可以试试！

我写了一个详细的教程，附带关于这个初始选择问题及其变体的视频。它专注于单选，但多选只是直接使用对象数组而不是一个对象。

查看以获得更多理解 - 强烈推荐：

Initial Selection In AngularJS ng-options with track by

如果你还在努力解决这个问题，请在评论中告诉我。

Answer 2

如果您的模型与$scope.user.roles = [1];类似，那么您的ng-options应该是这样的，

  data-ng-options="role.id as role.name for role in roles"

这将只选择ID

如果您喜欢data-ng-options="role.name for role in roles"，那么您的模型应该像

$scope.user.roles = [{id:1, name:"Administrator"}];

因为这将选择整个对象

并在您的控制器中

$scope.user = {}; //this line should be add

因为您尝试访问roles的{{1}}属性但未定义user个对象，这也会发生错误

这是Updated Plunker

此处是针对user

的更新plunker1 plunker2

您可以在此处使用ng-options。请检查。

Answer 3

像这样

<body ng-init="role.name = roles[0].name" data-ng-app="role" data-ng-controller="fooController">
  <select multiple class="form-control" data-ng-model="user.roles" data-ng-options="role.name for role in roles" required=""></select>
</body>

Answer 4

您的Plunkr有错误。您必须在使用之前定义$scope.user = {};。然后它会工作。

注意：这只会为模型设置初始值。如果你想在默认情况下突出显示管理员，你必须找到其他方法。

如何设置ng-options的默认值（多选）

4 个答案: