Angular + selected:选定的值

时间:2013-06-21 05:45:55

标签: angularjs jquery-chosen

我有一个关于在所选小部件和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/

感谢你的激光。

马捷

2 个答案:

答案 0 :(得分:6)

自AngularJS 1.1.5版以来,他们添加了track by子句。

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

答案 1 :(得分:4)

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

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

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

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

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