각도 드롭 다운 페치 데이터에 옵션 추가

Question

저는 오랫동안 그 주변을 둘러 보았습니다. 그러나 멀리 떨어져있는 내 질문에도이 답변이 포함되어 있지 않습니다.

상황은 다음 데이터베이스에서 가져온 데이터를

내가 AngularJS와를 사용하여 드롭 다운을 채우는 (또는 당신이 원하는대로 선택)하고있어 (^ 1.6.2). 이 데이터는 ng-options을 사용하여 올바르게 선택되고 모두 올바르게 설정됩니다.

는 내가 달성하기 위해 노력하고있어 것은 NULL 옵션은 옵션이 목록에 추가됩니다 있다는 것입니다,하지만 가져온 데이터를 포함하는 $scope 객체에 하지.

나는 몇 가지 코드를 명확히 것 :

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

내가 사용이 드롭 다운에 NULL 옵션을 추가 시도했다 :

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

이것은, 이런 걸 옵션의 목록을 생성합니다 다음 각도 필터 :

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>