Angularjs Select значения удаляются из ngModel после программного добавления
Я использую Angularjs с select2. У меня есть поле с несколькими вариантами выбора, которое заполняется на основе значений, выбранных в другом раскрывающемся списке. Я использую событие click для кнопки для запуска метода, который добавляет список идентификаторов к объекту ngModel, назначенному блоку множественного выбора. Я вижу, как значения добавляются правильно после того, как я инициирую событие изменения в этом элементе формы, потому что даже после чтения статей и изменения значения ngModel на объект, а не массив, значения все еще не являются обязательными, когда я добавляю их программно. После того, как я инициирую событие изменения в элементе формы, я могу видеть некоторые значения, но не все из них. Некоторые значения были удалены. Ниже мой код.
addSegment.vm
<div class="col-sm-4">
<select ui-select2="{ allowClear: false, minimumResultsForSearch: 10, theme: bootstrap }"
name="segmentTemplate" ng-model="addSegmentCtrl.selectedTemplate">
<option class="selectPlaceholder" value="" disabled selected hidden>- Chose Segment Template -</option>
<option ng-repeat="template in addSegmentCtrl.segmentTemplates" value="{{template.name}}">{{template.name}}</option>
</select>
</div>
<div class="col-sm-9">
<button id="addButton" class="btn btn-primary btn-lg" ng-click="addSegmentCtrl.addAppCodes()" ng-disabled="addSegmentCtrl.isLoading
|| addSegmentCtrl.isEdit">Add</button>
</div>
<div class="col-lg-9 col-xs-9" id="fiAppCodesContainer" name="fiAppCodesContainer">
<select ui-select2="{ allowClear: false, minimumResultsForSearch: Infinity}"
name="fiAppCodes" id="fiAppCodes" class="medium"
multiple ng-model="addSegmentCtrl.selectedAppCodeIds.appCodes"
ng-required="true" ng-cloak>
<option ng-repeat="appCode in addSegmentCtrl.availableAppCodes | notInArray:addSegmentCtrl.selectedAppCodeIds.appCodes:'appcodeId'"
value="{{appCode.appcodeId}}">{{appCode.name}}</option>
</select>
<input type="hidden" ng-model="addSegmentCtrl.selectedAppCodeName" value="">
</div>
app.js
businessBankingApp.controller('AddSegmentController', ['$http', '$window', '$modal', '$log','$filter', '$timeout', function ($http, $window, $modal, $log, $filter, $timeout) {
var self = this;
self.availableAppCodes = [{
appcodeId: "1",
description: "LoginFlow.UI"
},{
appcodeId: "4E30B33AC0B351F8E053F799660A9886",
description: "BBReports.Page"
},{
appcodeId: "3C59164693EE6441E053609E680A066C",
description: "BBDecisionCheckPositivePay.Page"
}];
self.segmentTemplates = null;
self.selectedAppCodeIds = {};
self.addAppCodes = function () {
//if all the selected app codes have been deleted, reset the list to empty before adding new app codes.
if(self.selectedAppCodeIds.appCodes === undefined){
self.selectedAppCodeIds.appCodes = [];
}
//add app code ids from the selected segment.
self.segmentTemplates.appcode.forEach(function (code) {
self.selectedAppCodeIds.appCodes.push(code.appcodeId);
});
self.refreshSelectedAppCodes();
self.appCodesAdded = true;
};
self.refreshSelectedAppCodes = function() {
$timeout( function() {
//refresh selected appcodes
$('#fiAppCodes').val( self.selectedAppCodeIds.appCodes ).trigger('change');
} , 100 );
};
self.loadSegmentTemplateData = function(){
self.segmentTemplates = {segment:{
name: "Base + Wires + PPay",
appcode:[{
appcodeId: "45",
description: "MakeLoanPayment.UI"
},
{
appcodeId: "44",
description: "RequestLoanAdvance.UI"
},
{
appcodeId: "4",
description: "MyAccounts.Widget"
},
{
appcodeId: "5",
description: "AccountHistory.UI"
},
{
appcodeId: "8",
description: "Transfers.UI"
},
{
appcodeId: "11",
description: "ScheduledRecurringTransfers.UI"
},
{
appcodeId: "14",
description: "Custom.Widget"
},
{
appcodeId: "20",
description: "BBApproval.Widget"
},
{
appcodeId: "21",
description: "Alerts.UI"
},
{
appcodeId: "22",
description: "MySettings.Page"
},
{
appcodeId: "23",
description: "RenameHideAccounts.Page"
},
{
appcodeId: "25",
description: "StopPay.Page"
},
{
appcodeId: "28",
description: "BBManagePaymentTemplates.Page"
},
{
appcodeId: "29",
description: "BBWires.Feature"
},
{
appcodeId: "31",
description: "BBEntitlements.Page"
},
{
appcodeId: "32",
description: "BBMakeCollectPayment.Page"
},
{
appcodeId: "33",
description: "BBBillPaySSO.Link"
},
{
appcodeId: "34B76075F9FC4176E0535F9E680A1788",
description: "BBIntlWires.Feature"
},
{
appcodeId: "3C5910C2EB247108E0535F9E680A40C8",
description: "BBCheckPositivePay.Feature"
},
{
appcodeId: "3C5914E8D6024599E0535F9E680A2181",
description: "BBManageCheckPositivePay.Page"
},
{
appcodeId: "3C591353BD524D65E053609E680A32FF",
description: "BBViewCheckPositivePay.Page"
},
{
appcodeId: "56E40185BC57672CE053609E680A9407",
description: "RequestLoanAdvance.UI"
},
{
appcodeId: "56E40500A3D040EFE053609E680A29BB",
description: "BBManageACHPositivePay.Page"
}]
}}
};
}]);
//filter to filter out appcodes that have already been selected.
businessBankingApp.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;
});
}
};
}]);
1 ответ
Решение
Причина, по которой некоторые из моих значений были удалены из массива selectedAppCodeIds после их добавления программным способом, заключалась в том, что их нет в массиве availableAppCodes. Однажды я убедился, что те значения, где в массиве availableAppCodes все было хорошо.