javascript - AngularJS 和 UI-Select multiple with data

Question

下午好!

我正在尝试使用 UI-Select 来填充与模型关联的表单。使用 Controller 以下列方式从服务器接收模型数据:

<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"
                }
            }
        });
    });

服务器以下列方式获取 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 错误:

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 获取信息，因为我的做法略有不同，但以下代码是一种使用简单的 ng-repeat 和 js 文件中的 track by 和 $scope 数组的方法。

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

这是使用 $scope.choice 数组列出下拉列表中的元素和选择元素的简单方法

如果您可以将您的信息返回到 $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>

例子.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