Angular JS: ng-repeat with dynamic ng model

Question

I have this working piece of code that repeats several times, so it works great for the ng-repeat loop. For example, two instances of my code are as follows.

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

This is the filterParamDisplay array in Javascript:

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

I tried to do this in an ng-repeat loop, but haven't had time yet. This is what I encoded 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> 

The problems relate to the ng-model variable above and to the $ index in ng-click and ng-show. Not sure if this can be done at all, any help is much appreciated, thanks!

---

UPDATE: Thanks for all the answers using

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

It works great!

Still struggling with showParam and resetSearchField functions that don't work properly using $ index. Here is my 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

When you bind your ng models to searchParameters.userName and searchParameters.userMail in the first example, you should use searchParameters[param.param] for ng-model in ng-repeat. Also, like others, you do not need to use $ index, you got your object as a param in the 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> 

FIDDLE works here

Answer 2

 <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 binds this to get a single object, such as "username" or "letter"

you want the same value in ng-show and ng-click to be used above one. or other reasonable use below one.

 <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 reference is to get the whole object based on the control

this will pass the entire list of objects.

Answer 3

You do not need to interpolate angular variables inside ng-* directives.

Try:

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 4

As @aarosil said, you do not need to use $index . I wrote a little jsfiddle, I don’t know your logic behind showParam, so I mocked it.

View:

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

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