5

我有一个关于结合所选小部件和 AngularJS 设置 ng-model 的问题（请参阅此视频：https ://www.youtube.com/watch?v=8ozyXwLzFYs ）

我想做的是将收件人设置为一些将被预选的值。这是此示例的 HTML 和 JS（来自视频）

<h1>Chosen</h1>
  <select data-placeholder="Choose a Recipient" multiple class="span4 chzn-select" chosen
      ng-model="recipients" ng-options="recipient.name for recipient in recipientsList">
  </select>

  <p ng-repeat="recipient in recipients"><strong>{{recipient.name}}</strong></p>

和控制器中的 JS

$scope.recipientsList = [];
    $scope.recipients = [];
    $scope.fetchRecipients = function() {
        $http.get($scope.url).then(function(result){

       $scope.recipientsList = [
    {"id":0, "name":"Recipient 0"},
    {"id":1, "name":"Recipient 1"},
    {"id":2, "name":"Recipient 2"},
    {"id":3, "name":"Recipient 3"},
    {"id":4, "name":"Recipient 4"},
    {"id":5, "name":"Recipient 5"},
    {"id":6, "name":"Recipient 6"},
    {"id":7, "name":"Recipient 7"},
    {"id":8, "name":"Recipient 8"},
    {"id":9, "name":"Recipient 9"},
    {"id":10, "name":"Recipient 10"}
];
     $scope.recipients = [{"id":0, "name":"Recipient 0"}, 
     {"id":1, "name":"Recipient 1"}];
     });
  }

    $scope.fetchRecipients();

我尝试了一些组合，但菜单中的值没有预先选择，尽管它们存储在收件人中，因为它们在菜单下方可见。你可以在这里看到这个例子：http: //jsfiddle.net/YKZSw/8/

谢谢你的回答。

马泰

4

2 回答 2

6

从 AngularJS 版本 1.1.5 开始，他们添加了一个track by子句。

这应该会有所帮助。在您的情况下，您可以按 id 添加曲目。

于 2013-06-28T16:51:54.067 回答
4

AngularJS ngOptions 属性从作为数据源提供的数组中选择一个元素。在您的情况下，收件人列表数组包含一定数量的对象。然而，由于对象不平等，您希望预选的元素即使相似，也不会出现在列表中。含义收件人列表：{“id”：0，“名称”：“收件人0”}不等于收件人：{“id”：0，“名称”：“收件人0”}（您可以在JS中尝试相同安慰）。Angular 在列表中找不到元素，因此不会预选。

这个修改过的小提琴有效：http: //jsfiddle.net/mananbharara/YKZSw/9/ 在这种情况下，唯一的区别在于您的收件人定义：

$scope.recipients = [$scope.recipientsList[0], $scope.recipientsList[1]];

在这种情况下，您有一个列表，并且选定的值只能来自该列表。

如果您必须维护两个列表，您可以使用此方法的替代方法是将选择值保留为原始类型。在这种情况下，原始相等将始终成立。

于 2013-06-23T07:36:45.547 回答