JS angolare: ng-repeat con dynamic ng-model

Question

Ho questo working pezzo di codice che viene ripetuto più volte, quindi sarebbe ottimo per un ciclo ripetizione ng. Ad esempio, due istanze del mio codice sono le seguenti.

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

Questa è la matrice filterParamDisplay in Javascript:

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

ho cercato di farlo in un ciclo ng-repeat, ma senza successo finora. Questo è quello che ho codificato atm.

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

I problemi sono nella variabile ng-modello di cui sopra, e nell'indice $ nel ng-clic e ng-show. Non so se questo può essere fatto, qualsiasi aiuto è molto apprezzato, grazie!

---

UPDATE: Grazie per tutte le risposte, utilizzando

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

funziona benissimo!

Ancora in difficoltà sulle funzioni showParam e resetSearchField che non funzionano correttamente utilizzando ancora $ index. Ecco il mio codice.

$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

Come si legano i modelli ng a searchParameters.userName e searchParameters.userMail al primo esempio, è necessario utilizzare searchParameters[param.param] per ng-model in ng-repeat. Inoltre, come altri hanno detto, non è necessario utilizzare $ index, hai ottenuto il tuo oggetto come param in ambito ng-repeat.

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

Qui sta lavorando FIDDLE

Answer 2

Non è necessario interpolare le variabili angolari all'interno delle direttive ng-*.

Prova:

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

Come @aarosil detto che non è necessario utilizzare $index. Ho scritto un piccolo jsfiddle, non conosco la tua logica dietro showParam così l'ho deriso.

Vista:

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

e il 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'

si desidera solo valore n g-show e ng-click usano sopra uno. o altro saggio usato in basso.

<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

questa volontà passa l'intera serie di elenco degli oggetti.