以编程方式添加后，Angularjs Select 值将从 ngModel 中删除答案

【问题标题】：Angularjs Select values are getting removed from ngModel after being added programmicatically以编程方式添加后，Angularjs Select 值将从 ngModel 中删除
【发布时间】：2020-01-30 07:22:40
【问题描述】：

我正在使用带有 select2 的 Angularjs。我有一个多选框，它根据在另一个下拉列表中选择的值进行填充。我使用按钮上的单击事件来触发将 id 列表添加到分配给多选框的 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;
            });
        }
    };
}]);

【问题讨论】：

我停在“Angularjs 1.2.23”。如果你关心避免错误，你不应该使用这样一个过时的版本。我们的版本是 1.6.9。自 1.2.23 以来已经发布了数十个版本。
感谢您@JBNizet 的洞察力，但是当您为一家不到一年前才加入的大公司工作时，您无法选择只进行升级。如果我们存在于理想世界中的世界中，我们总是可以选择该选项。但再次，非常感谢你有见地的话。
有没有机会在小提琴或 plunkr 中重现？
@tymeJV 我以前从未这样做过，但我可以尝试发帖。

标签： angularjs angularjs-scope angularjs-ng-repeat ui-select ui-select2

【解决方案1】：

我的一些值在以编程方式添加后从 selectedRecordIds 数组中删除的原因是它们不在 availableRecords 数组中。一旦我确定 availableRecords 数组中的那些值都很好。

【讨论】：