gpt4 book ai didi

angularjs - 如何为ng-options设置默认值(多选)

转载 作者:行者123 更新时间:2023-12-04 03:20:39 25 4
gpt4 key购买 nike

我想通过使用ng-initng-model等为ng-options设置默认值。它们根本不起作用。我的代码如下:

Angular

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.
任何帮助,将不胜感激。

最佳答案

Update:

If you want to get directly to the reference used in this answer, here it is:

Reference: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中具有相同属性的2个对象,也会返回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>
然后在您的 Controller 中,您可以使用任何对象而无需实际位于数组中:
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

如果您仍在努力,请在评论中让我知道。

关于angularjs - 如何为ng-options设置默认值(多选),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27351251/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com