Question

我的服务器需要像{id1: '1', name: 'one' }这样的JSON。服务器还以这种表示法将我的数据带回来。问题是当我有一个多选择下拉菜单，允许用户选择多个项目。

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

app.controller('MyController', function($scope, thingService) {
    //thing service is the service that returns objects likc such {id: 1, name: 'one'}

    $scope.data = [
        {id: 1, name: 'one'},
        {id: 2, name: 'two'},
        {id: 3, name: 'three'}
    ];

    $scope.selectedItems = thingService.getMyItems(); //this returns [{ id: 2, name: 'two' }]
    // alternatively we can have $scope.selectedItem = [{ id: 2, name: 'two' }]

    $scope.saveselection = function() {
        // performs a save operation to the service.
        // not really important for this demo.
    }

});

标记：

<select multiple
        ng-options='item.id as item.name for item in data'
        ng-model='selectedItems'>
</select>

因为对象是通过引用而不是值绑定的数据。看起来我需要额外的代码来将thingService返回的对象映射到data集合，否则我的下载加载将永远不会选择来自thingService的项目。 / p>

解决此问题的最佳方法是什么？我可以避免二次循环（一个通过selectedItems，一个通过数据来获得这个映射？）

Answer 1

<强> HTML

<select multiple ng-options='item.name for item in data track by item.id' 
 ng-model='selectedItem'></select>

您需要按item.id添加曲目，以告知AngularJS比较ID而不是整个对象：请参阅此SO Question

Working Plunkr

Answer 2

根据Sergiu Paraschiv的建议，您可以使用track by，如果我需要获取项目，您可以编辑ng-options，如下所示：[...] ng-options='item as item.name for item [...]

再见

当NgModel是对象时，角度下拉

2 个答案: