AngularJS和UI-选择多个数据

AngularJS and UI-Select multiple with data

本文关键字:数据 选择 UI- AngularJS      更新时间:2023-09-26

下午好!

我正在尝试使用 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"
                }
            }
        });
    });

服务器按以下方式获取工作计划对象:

{"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":[]}

我也使用一个相同的查找控制器:

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' 重复!我应该怎么做才能使其正常工作?

我不确定您从 php 获取信息的方式,因为我的做法略有不同,但以下代码是一种在 js 文件中使用带有跟踪和 $scope 数组的简单 ng-repeat 的方法。

ng-repeat可以以相同的方式与许多不同的元素一起使用。

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

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

索引.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