AngularJS and UI - multiple data selection

Question

Good afternoon!

I am trying to use UI-Select to fill out a form related to a model. These models are received from the server using the controller as follows:

<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 is a simple REST service:

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

The server accepts the WorkPlan object as follows:

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

I also use LookupController, which is the same:

 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 receives data in the following form:

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

And everything looks good than the workplan.profiles ng-model property is empty:

http://joxi.ru/n2YR57wS4jwOA6

Then I save the data on the server, Angular sends a POST with the following data:

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

I see that profiles are an array of keys and it is in the correct form. But when I try to load this data into the model and fill out the form, I get a lot of 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

But I already add a track by the condition of repetition of ui-select-choice! What should I do to make it work correctly?

Answer 1

I'm not sure how you are going to get your information from php, since I do it a little differently, but the following code is a way to use simple ng-repeat with tracking and $ scope array in js file.

ng-repeat can be used identically with many different elements.

Here is an easy way to use the $ scope.choice array to list items in a drop-down list and a selection item

If you can return your information to the $ scope variable, this should help you

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