Я использую Angularjs с select2. У меня есть поле с множественным выбором, которое заполняется на основе значений, выбранных в другом раскрывающемся списке. Я использую событие щелчка на кнопке для запуска метода, который добавляет список идентификаторов в объект ngModel, назначенный для поля множественного выбора. Я вижу, что значения добавляются правильно после того, как я запускаю событие изменения в этом элементе формы, потому что даже после прочтения статей и изменения значения ngModel как объекта, а не массива, значения по-прежнему не являются обязательными, когда я добавляю их программно. После запуска события изменения элемента формы я могу видеть некоторые значения, но не все. Некоторые значения были удалены. Ниже мой код.
addRecord.vm
<div class="col-sm-4">
<select ui-select2="{ allowClear: false, minimumResultsForSearch: 10, theme: bootstrap }"
name="recordTemplate" ng-model="addRecordCtrl.selectedTemplate">
<option class="selectPlaceholder" value="" disabled selected hidden>- Chose Record Template -</option>
<option ng-repeat="template in addRecordCtrl.recordTemplates" value="{{record.name}}">{{record.name}}</option>
</select>
</div>
<div class="col-sm-9">
<button id="addButton" class="btn btn-primary btn-lg" ng-click="addRecordCtrl.addRecords()" ng-disabled="addRecordCtrl.isLoading
|| addRecordCtrl.isEdit">Add</button>
</div>
<div class="col-lg-9 col-xs-9" id="recordContainer" name="recordContainer">
<select ui-select2="{ allowClear: false, minimumResultsForSearch: Infinity}"
name="records" id="records" class="medium"
multiple ng-model="addRecordCtrl.records.id"
ng-required="true" ng-cloak>
<option ng-repeat="record in addRecordCtrl.availableRecords | notInArray:addRecordCtrl.selectedRecordIds.ids:'recordId'"
value="{{record.recordId}}">{{record.name}}</option>
</select>
<input type="hidden" ng-model="addRecordCtrl.selectedRecordName" value="">
</div>
app.js
recordApp.controller('RecordController', ['$http', '$window', '$modal', '$log','$filter', '$timeout', function ($http, $window, $modal, $log, $filter, $timeout) {
var self = this;
self.availableRecords = [{
recordId: "1",
name: "Love and Happiness"
},{
recordId: "2",
name: "Feel the Burn"
},{
recordId: "3",
name: "Juicy Baby"
}];
self.recordTemplates = null;
self.selectedRecordIds = {};
self.addRecords = function () {
//add record ids from the selected records.
self.recordTemplates.recordId.forEach(function (id) {
self.selectedRecordIds.ids.push(id.recordId);
});
self.recordAdded = true;
};
}]);
//filter to filter out ids that have already been selected.
recordsApp.filter('notInArray', ['$filter', function($filter){
return function(list, arrayFilter, element){
if(arrayFilter){
return $filter("filter")(list, function(listItem){
for (var i = 0; i < arrayFilter.length; i++) {
if (arrayFilter[i][element] == listItem[element])
return false;
}
return true;
});
}
};
}]);