AngularJS和UI-选择多个数据

Question

下午好！

我正在尝试使用UI-Select来填充与模型相关联的表单。 使用控制器通过以下方式从服务器接收模型数据：

<form action="index.php" method="post" class="form-horizontal" ng-controller="WorkPlanController as ctrl" ng-init="init(6)">

<!-- this work perfectly! -->
    <textarea name="workplan_approver_post" ng-model="workplan.approver_post"></textarea>

<!-- here I have troubled -->
<div ng-controller="LookupController as lookupCtrl" ng-init="lookupCtrl.initLookup('corriculum_speciality_directions')">
<ui-select ng-disabled="disabled" multiple ng-model="workplan.profiles" theme="select2">
<ui-select-match placeholder="Выберите значение из списка">{{$item.value}}</ui-select-match>
<ui-select-choices repeat="item.key as item in items track by $index | filter: $select.search">
<div ng-bind-html="item.value | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>

</form>

WorkPlanController是一个简单的REST服务：

application
    .controller("WorkPlanController", [
        '$scope',
        'WorkPlan',
    function($scope, workPlanFactory){
        $scope.workplan;
        $scope.workplan = {
            profiles: []
        };
        $scope.init = function($id){
            workPlanFactory.get({id: $id}, function(data){
                $scope.workplan = data;
            });
        };

        $scope.save = function(){
            $scope.workplan.$save();
        }
    }]);

application
    .factory('WorkPlan', function($resource){
        return $resource(web_root + "_modules/_corriculum/workplans.php", {
            model: "CWorkPlan",
            type: "json"
        }, {
            get: {
                method: "GET",
                params: {
                    id: '@id',
                    action: "get"
                }
            }
        });
    });

Server以下列方式获取WorkPlan对象：

{"id":"5","title":"title","department_id":"0","approver_post":"","approver_name":"","discipline_id":"402","corriculum_discipline_id":"566","direction_id":"79","qualification_id":"220","education_form_id":"0","year":"2015","author_id":"311","profiles":[]}

我也使用LookupController，它是相同的：

application
    .factory("LookupCatalog", function($resource){
        return $resource(web_root + "_modules/_search/", {

        }, {
            query: {
                method: "GET",
                isArray: true,
                params: {
                    catalog: '@catalog',
                    action: "NgLookupViewData"
                }
            }
        });
    })
    .controller("LookupController", [
        '$scope',
        'LookupCatalog',
        function ($scope, lookupCatalog) {
            $scope.items;

            this.initLookup = function (glossary) {
                lookupCatalog.query({catalog: glossary}, function(data) {
                    $scope.items = data;
                });
            }
        }
    ]);

LookupController以下列形式接收数据：

[{"key":429,"value":"data1"},{"key":430,"value":"data2"},{"key":1743,"value":"data3"},{"key":1744,"value":"data4"},{"key":1852,"value":"data5"}]

一切看起来不错，然后ng-model workplan.profiles属性为空：

http://joxi.ru/n2YR57wS4jwOA6

然后我将数据保存到服务器，Angular使用以下数据发送POST：

{"id":"5","title":"title","department_id":"0","approver_post":"","approver_name":"","discipline_id":"402","corriculum_discipline_id":"566","direction_id":"79","qualification_id":"220","education_form_id":"0","year":"2015","author_id":"311","profiles":[430,430]}

我看到，这些配置文件是键的数组，它是正确的形式。 但是当我尝试将这些数据加载回模型并填充表单时，我得到了很多js-errors：

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $item in $select.selected, Duplicate key: undefined:undefined, Duplicate value: undefined
http://errors.angularjs.org/1.3.2/ngRepeat/dupes?p0=%24item%20in%20%24select.selected&p1=undefined%3Aundefined&p2=undefined
    at REGEX_STRING_REGEXP (angular.js:80)
    at ngRepeatAction (angular.js:24167)
    at Object.$watchCollectionAction [as fn] (angular.js:13909)
    at Scope.$get.Scope.$digest (angular.js:14042)
    at Scope.$get.Scope.$apply (angular.js:14304)
    at angular.js:16035
    at completeOutstandingRequest (angular.js:4842)
    at angular.js:5215
angular.js:11383 TypeError: Cannot read property 'search' of undefined
    at uis.directive.link.ngModel.$formatters.unshift.checkFnMultiple (angular-select.js:1111)
    at Array.<anonymous> (angular-select.js:1125)
    at Object.ngModelWatch (angular.js:20669)
    at Scope.$get.Scope.$digest (angular.js:14034)
    at Scope.$get.Scope.$apply (angular.js:14304)
    at done (angular.js:9518)
    at completeRequest (angular.js:9703)
    at XMLHttpRequest.requestLoaded (angular.js:9646)

http://dl2.joxi.net/drive/0009/3267/613571/150315/90c1afa060.jpg

但是我已经按照条件添加了ui-select-choices'重复！ 我该怎么做才能让它正常工作？

Answer 1

我不知道你从php获取信息的方式是什么，因为我做的略有不同，但下面的代码是一种在js文件中使用track by和$ scope数组的简单ng-repeat的方法。

ng-repeat可以以相同的方式用于许多不同的元素。

下面是一个使用$ scope.choice数组列出下拉列表和select元素中元素的简单方法

如果您可以将您的信息返回到$ scope变量，那么这应该对您有所帮助

的index.html

<div ng-controller="DropdownCtrl">

    <!-- Single button -->
    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
               <li ng-repeat="choice in items track by $index">
          <a href>{{choice}}</a>
        </li>
      </ul>
    </div>


    <select>
      <option ng-repeat="choice in items track by $index">{{choice}}</option>
    </select>

</div>

example.js

  $scope.items = [
    'The first choice!',
     'The first choice!',
    'And another choice for you.',
    'but wait! A third!'
  ];

http://plnkr.co/edit/tL7OVpU6Yep8ReiAa5FG?p=preview