Angular JS: ng-repeat avec dynamique ng-model

J'ai cette de travail morceau de code qui est répété plusieurs fois, d'où serait formidable pour un ng-repeat boucle.
Par exemple, les deux instances de mon code sont les suivantes.

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

C'est le filterParamDisplay tableau en Javascript:

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

J'ai essayé de le faire dans un ng-repeat boucle, mais sans succès jusqu'à présent.
C'est ce que j'ai codé 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>

Les problèmes sont dans le ng-variable du modèle ci-dessus, et dans le $index dans le ng-click et ng-show.
Vous ne savez pas si cela peut être fait à tout, toute aide est très appréciée, merci!

Mise à JOUR:
Merci pour toutes les réponses, à l'aide de

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

Fonctionne très bien!

Encore du mal sur le showParam et resetSearchField fonctions qui ne fonctionnent pas correctement à l'aide de $index. Voici mon code.

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

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

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

Vous n'avez pas besoin de faire showParam(filterParamDisplay[$index]). ShowParam(param) lui-même doit travailler, depuis param est défini par la ngRepeat
Il doit y avoir un problème avec searchParams champ. Pourriez-vous partager votre js qui contient searchParams et resetSearchField.

InformationsquelleAutor MDT | 2014-09-05

10

Que vous liez votre ng-modèles à searchParameters.userName et searchParameters.userMail au premier exemple, vous devez utiliser searchParameters[param.param] pour ng-model en ng-repeat. Comme les autres aussi dit, vous n'avez pas besoin d'utiliser $index, vous avez obtenu votre objet param en ng-repeat portée.
```
<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>
```
Voici de travail VIOLON

InformationsquelleAutor Cem Özer

<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 lien de celui-ci pour obtenir un objet unique, comme "nom d'utilisateur" ou "e-mail"

vous voulez de valeur unique en ng-show et ng-cliquez sur utiliser au-dessus de l'un. ou d'autres de l'utilisation rationnelle belowed un.

<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 lien c'est obtenir de l'ensemble de l'objet sur la base du contrôle

cela passe l'ensemble de la liste d'objet.

InformationsquelleAutor Rajamohan Anguchamy

Vous n'avez pas besoin d'interpoler angulaire de variables à l'intérieur ng-* directives.

Essayer:

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>

Contrôleur:

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

jsfiddle

InformationsquelleAutor Foo L

Comme @aarosil dit que vous n'avez pas besoin d'utiliser $index.
J'ai écrit un petit jsfiddle, je ne sais pas votre logique derrière showParam donc je moqués.

Vue :

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

et du contrôleur :

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

InformationsquelleAutor MiTa

Vous devez vous connecter pour publier un commentaire.