각도 JS : 동적 ng 모델의 ng-repeat

Question

이 코드는 입니다. 코드는 여러 번 반복되므로 ng-repeat 루프에 유용합니다. 예를 들어, 내 코드의 두 인스턴스는 다음과 같습니다. 나는 NG 반복 루프에 그 일을하려고하지만, 지금까지 성공하지 않고있다

$scope.filterParamDisplay = [ 
     {param: 'userName', displayName: 'User Name'}, 
     {param: 'userEmail', displayName: 'User Email'} 
    ]; 

:

<div> 
     <input type="text" ng-model="searchParamaters.userName" placeholder="User Name"/> 
     <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[0].param)" ng-show="showParam(filterParamDisplay[0].param)"></i> 
    </div> 
    <div> 
     <input type="text" ng-model="searchParamaters.userEmail" placeholder="User Email"/> 
     <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[1].param)" ng-show="showParam(filterParamDisplay[1].param)"></i> 
    </div> 

이 자바 스크립트에서 filterParamDisplay의 배열입니다. 이것은 내가 코딩 한 것입니다.

<div ng-repeat="param in filterParamDisplay"> 
     <input type="text" ng-model="searchParams[{{param}}]" placeholder="{{param.displayName}}"/> 
     <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[$index].param)" ng-show="showParam(filterParamDisplay[$index].param)"></i> 
    </div> 

위의 ng-model 변수와 ng-click 및 ng-show의 $ index에 문제가 있습니다. 이 작업을 수행 할 수 있는지 확실하지 않은 경우 어떤 도움을 주셔서 감사합니다.

---

는 UPDATE : 모든 답변을 감사합니다, 사용

 <div ng-repeat="p in filterParamDisplay"> 
... 
    ng-model="searchParams[p]" 

위대한 작품!

아직 $ index를 사용하여 제대로 작동하지 않는 showParam 및 resetSearchField 함수에 어려움을 겪고 있습니다. 여기 내 코드가있다.

$scope.searchParams = $state.current.data.defaultSearchParams; 

    $scope.resetSearchField = function (searchParam) { 
     $scope.searchParams[searchParam] = ''; 
    }; 

    $scope.showParam = function (param) { 
     return angular.isDefined($scope.searchParams[param]); 
    }; 

Answer 1

첫 번째 예에서 ng-models를 searchParameters.userName 및 searchParameters.userMail으로 바인딩 할 때 ng-repeat에서 ng-model에 searchParameters[param.param]을 사용해야합니다. 또한 다른 사람들이 말했듯이, $ index를 사용할 필요가 없으므로 객체를 ng-repeat 범위에 param으로 가져 왔습니다. 여기

<div ng-repeat="param in filterParamDisplay"> 
    <input type="text" ng-model="searchParameters[param.param]" placeholder="{{param.displayName}}"/> 
    <i class="fa fa-times" ng-click="resetSearchField(param.param)" ng-show="showParam(param.param)"></i> 
</div> 

당신은`showParam (filterParamDisplay [$ 지수])`할 필요가 없습니다 FIDDLE

Answer 2

ng-* 지시문 안에 각도 변수를 삽입 할 필요가 없습니다.

시도 :

HTML :

<div ng-repeat="p in filterParamDisplay"> 
    <input type="text" ng-model="searchParams[p]" placeholder="{{p.displayName}}"/> 
    <i ng-click="printme(p.param)">click</i> 
</div> 

컨트롤러 : @aarosil 당신이 $index를 사용할 필요가 없습니다 말했듯이

$scope.filterParamDisplay = [ 
    {param: 'userName', displayName: 'User Name'}, 
    {param: 'userEmail', displayName: 'User Email'} 
]; 
$scope.printme = function(v) { 
    console.log(v); 
}; 

jsfiddle

Answer 3

. 나는 작은 jsfiddle을 썼다. 나는 showParam 뒤에 당신의 논리를 몰랐다. 그래서 나는 그것을 조롱했다.

보기 :

<div ng-controller="Ctrl"> 
    <div ng-repeat="param in filterParamDisplay"> 
    <input type="text" ng-model="searchParams[param.param]" placeholder="{{param.displayName}}"/> 
    <i class="fa fa-times" ng-click="resetSearchField(param)" ng-show="showParam(param)"></i> 
    </div> 
</div> 

및 컨트롤러 :

$scope.searchParams = {}; 
$scope.filterParamDisplay = [ 
    {param: 'userName', displayName: 'User Name'}, 
    {param: 'userEmail', displayName: 'User Email'} 
]; 
$scope.resetSearchField = function(param){ 
    $scope.searchParams[param.param] = ""; 
}; 
$scope.showParam = function(param){ ... } 

http://jsfiddle.net/29bh7dxe/1/

Answer 4

<div ng-app="dynamicAPP"> 
    <div ng-controller="dynamicController"> 
     <div ng-repeat="param in filterParamDisplay"> 
      <input type="text" ng-model="searchParams[param.param]" placeholder="{{param.displayName}}" /> <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[$index].param)" ng-show="showParam(filterParamDisplay[$index].param)"></i> 
     </div>{{searchParams}}</div> 
</div> 

Jsfiddler link this one for get a single object like 'username' or 'email'

당신이 N에서 단일 값을 원하는 g-show 및 ng-click을 사용하십시오. 또는 다른 현명한 사용 아래에 하나.

<div ng-app="dynamicAPP"> 
    <div ng-controller="dynamicController"> 
     <div ng-repeat="param in filterParamDisplay"> 
      <input type="text" ng-model="searchParams[param.param]" placeholder="{{param.displayName}}" /> <i class="fa fa-times" ng-click="resetSearchField(.param)" ng-show="showParam(param)"></i> 
     </div>{{searchParams}}</div> 
</div> 

Jsfiddler link this one is get whole object based on the control

이 의지는 개체 목록의 전체 세트를 전달합니다.