Angular JS: ng-repeat mit dynamischem ng-Modell

Question

Ich habe dieses funktioniert Stück Code, der mehrmals wiederholt wird, wäre also ideal für eine ng-Repeat-Schleife. Zum Beispiel sind zwei Instanzen meines Codes die folgenden.

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

Dies ist die filterParamDisplay Array in Javascript:

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

Ich habe das in eine ng-Wiederholungsschleife zu tun versucht, aber bisher ohne Erfolg. Dies ist, was ich atm codiert habe.

Die Probleme sind in der obigen ng-Modell-Variable und in den $ index in ng-click und ng-show. Nicht sicher, ob dies überhaupt möglich ist, jede Hilfe wird sehr geschätzt, danke!

---

UPDATE: Danke für alle Antworten, mit

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

funktioniert super!

Immer noch Schwierigkeiten mit den Funktionen showParam und resetSearchField, die noch nicht richtig arbeiten mit $ index. Hier ist mein Code.

$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

Wenn Sie Ihre ng-Modelle an searchParameters.userName und searchParameters.userMail am ersten Beispiel binden, müssen Sie searchParameters[param.param] für ng-model in ng-repeat verwenden. Auch wie andere sagten, Sie brauchen $ index nicht zu verwenden, haben Sie Ihr Objekt als param in ng-Wiederholung Bereich.

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

Hier arbeitet FIDDLE

Answer 2

Sie brauchen keine Winkelvariablen innerhalb ng-* Richtlinien zu interpolieren.

Versuchen:

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> 

Controller:

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

jsfiddle

Answer 3

Wie @aarosil gesagt, Sie müssen $index nicht verwenden. Ich schrieb eine kleine jsfiddle, ich weiß nicht, Ihre Logik hinter showParam, also habe ich es verspottet.

Ausblick:

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

und Controller:

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

Sie Einzelwert in n wollen g-show und ng-click verwenden über eins. oder andere weise verwenden unterem einen.

<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

dieser Wille geht die ganze Reihe von Objektliste.