取り出したデータに角度ドロップダウンオプションを追加

Question

私はかなり長い間SOを見てきましたが、私の遠く離れた質問にもこれに対する答えが含まれていないようです。

の状況は次のとおりです。

（あなたが望むように、または選択）私は、データベースからフェッチされたデータとAngularJS（^ 1.6.2）を使用して、ドロップダウンを移入しています。このデータは、すべてが正しく設定された状態でng-optionsを使用して選択されます。

は私が達成しようとしていることNULLオプションは、オプションのリストに追加されていることですが、フェッチされたデータを含む$scopeオブジェクトへのない。

私はいくつかのコードで明確にされます：

<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> 

を私が使用して、このドロップダウンに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を他のフィルタと同様に使用します。

これは機能しますが、$scopeオブジェクトにはこのドロップダウンメニューの$scopeしか使用できません。アプリケーション全体の他のドロップダウンでドロップダウンを埋め込むために同じ$scopeオブジェクトが使用され、にはがありません。これはNULLオプションが使用可能なためです。要約すると

が、これは私の質問です：私は、その特定のドロップダウンの$scopeにのみ、事前にドロップダウンにNULLオプションを追加できるようにしたいと思います。

誰も私を正しい方向に導くことができますか？

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> 

これは、これを行うための最善の方法ではないかもしれませんが、私は複数回の周りに頭で強打が、これは私がしてきた唯一のソリューションです。このヘルプ

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); 
 
} 
 
})

<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>