Question

我已经在SO上寻找了相当长的一段时间，但是对我来说，没有一个甚至是非常接近的问题似乎都包含了答案。

情况如下：

我正在使用AngularJS（^ 1.6.2）填充下拉列表（或根据需要选择），其中包含从数据库中获取的数据。使用ng-options将此数据放入此选择中，并正确设置所有内容。

我想要实现的是，NULL选项会添加到此选项列表中，但不会添加到包含已获取数据的$scope对象。< / p>

我会用一些代码澄清：

<select ng-options="item as item.name for item in items track by item.id" 
        ng-model="forms.formDataObject.item">
</select>

这会生成一个选项列表，如下所示：

<select ...>
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  ...
</select>

我尝试使用以下Angular过滤器为此下拉列表添加NULL选项：

app.filter('addNullOption', () => {
    return (input) => {
        if (!input[0].null_option) {
            var emptyObj = angular.copy(input[0]);

            Object.keys(emptyObj).forEach((key) => {
                emptyObj[key] = null;
            });

            emptyObj.null_option = true;

            input.unshift(emptyObj);
        }
        return input;
    };
})

然后像使用其他过滤器一样在ng-options中应用过滤器。

这样做有效，但NULL选项添加到$scope对象，而不是仅在此下拉列表的$scope中可用。我不希望这种情况发生，因为整个应用程序中的其他下拉列表使用相同的$scope对象来填充下拉列表，并且不应提供此NULL选项

总结一下，这是我的问题：我希望能够在预先填充的下拉列表中添加NULL选项，<{1}}中的具体下拉。

有人能引导我朝正确的方向前进吗？

Answer 1

而不是将过滤器数据分配给同一个数组。将其分配给不同的数组。这样原始数组将保持不变。

<select ng-options="item as item.name for item in sampleAr = ( items | filter : addNullOption) track by item.id" 
        ng-model="forms.formDataObject.item">
</select>

这可能不是最好的方法，但我会多次敲打，但这是我带来的唯一解决方案。希望这个帮助

＆＃13;

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.items = [{"id":1,"name":"sss","null_option":true},{"id":2,"name":"aaa"},{"id":3,"name":"fff"},{"id":4,"name":"asdas"}]
$scope.sampleAr =  angular.copy($scope.items)


$scope.addNullOption = ()=>{
 return (input) => {
        if (input.null_option) {
            $scope.items.splice(input,1)
        }
        return input;
    };
}

$scope.copys = function (item){
   return angular.copy(item);
}
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <select ng-init="sampleAr = copys(items)"
 ng-options="item as item.name for item in sampleAr track by item.id" 
        ng-model="forms.formDataObject.item">
</select>
<div ng-init="items = items | filter :addNullOption() "> </div>
<br> 
{{items}}
<br> 
<br> 
{{sampleAr}}
</div>

＆＃13;

Angular dropdown为获取的数据添加选项

1 个答案: