我正在使用带有select2的Angularjs。我有一个多选框，根据在另一个下拉列表中选择的值进行填充。我在按钮上使用单击事件来触发一个方法，该方法将一个id列表添加到分配给多选框的ngModel对象中。我在该表单元素上触发更改事件后可以看到值正确添加，因为即使在读取文章并将ngModel值更改为对象而不是数组之后，当我以编程方式添加它们时，这些值仍然不具有约束力。在表单元素上触发change事件后，我能够看到一些值，但不是全部。一些值被删除了。以下是我的代码。
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;
});
}
};
}]);
答案 0 :(得分：0)
我的一些值在以编程方式添加后从selectedAppCodeIds数组中删除的原因是因为它们不在availableAppCodes数组中。一旦我确定了availableAppCodes数组中的那些值都很好。