6

I have this working piece of code that is repeated multiple times, hence would be great for a ng-repeat loop. For example, two instances of my code are the following.

 <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 have been trying to do that into a ng-repeat loop, but without success so far. This is what I have coded 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 are into the ng-model variable above, and into the $index in the 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]"

Works great!

Still struggling on the showParam and resetSearchField functions which do not work properly yet 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]); };
Improve this question
2
  • 1
    You don't need to do showParam(filterParamDisplay[$index]). ShowParam(param) itself should work, since param is set to that by the ngRepeat Commented Sep 5, 2014 at 7:11
  • There must be a problem with searchParams field. Could you share your js which contains searchParams and resetSearchField. Commented Sep 5, 2014 at 7:31

4 Answers 4

Reset to default
10

As you bind your ng-models to searchParameters.userName and searchParameters.userMail at first example, you must use searchParameters[param.param] for ng-model in ng-repeat. Also like others said, you don't need to use $index, you got your object as param in 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>

Here is working FIDDLE

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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 link this one for get a single object like 'username' or 'email'

you want single value in ng-show and ng-click use above one. or other wise use belowed 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 link this one is get whole object based on the control

this will passes the whole set of object list.

Improve this answer

Comments

0

You don't 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

Improve this answer

Comments

0

As @aarosil said you do not need to use $index. I wrote a small 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/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.