Tengo este código de trabajo que se repite varias veces, por lo tanto, sería genial para un ciclo ng-repeat. Por ejemplo, dos instancias de mi código son las siguientes.

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

Esta es la matriz filterParamDisplay en Javascript:

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

He estado tratando de hacer eso en un ciclo ng-repeat, pero sin éxito hasta ahora. Esto es lo que he codificado cajero automático.

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

Los problemas están en la variable ng-model anterior y en el índice $ en ng-click y ng-show. No estoy seguro de si esto se puede hacer, cualquier ayuda es muy apreciada, ¡gracias!


ACTUALIZACIÓN: Gracias por todas las respuestas, utilizando

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

¡Funciona genial!

Todavía tengo problemas con las funciones showParam y resetSearchField que aún no funcionan correctamente con $ index. Aquí está mi código.

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

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

    $scope.showParam = function (param) {
        return angular.isDefined($scope.searchParams[param]);
    };
6
MDT 5 sep. 2014 a las 11:01

4 respuestas

La mejor respuesta

Al vincular sus ng-models a searchParameters.userName y searchParameters.userMail en el primer ejemplo, debe usar searchParameters[param.param] para ng-model en ng-repeat. También, como otros dijeron, no necesita usar $ index, obtuvo su objeto como param en ng-repeat scope.

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

Aquí está trabajando FIDDLE

10
Cem Özer 5 sep. 2014 a las 08:02
<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 vincula este para obtener un solo objeto como 'nombre de usuario' o 'correo electrónico'

Desea un valor único en ng-show y ng-click use arriba de uno. u otro uso sabio debajo de uno.

<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 este es obtener un objeto completo basado en el control

Esto pasará todo el conjunto de la lista de objetos.

2
Rajamohan Anguchamy 5 sep. 2014 a las 09:57

No necesita interpolar variables angulares dentro de las directivas ng-*.

Tratar:

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>

Controlador:

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

jsfiddle

0
Foo L 5 sep. 2014 a las 08:47

Como dijo @aarosil, no es necesario usar $index. Escribí un pequeño jsfiddle, no sé tu lógica detrás de showParam, así que me burlé.

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>

Y controlador:

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

0
Puce 10 mar. 2015 a las 14:32