AngularJS filter by property using Ng-Repeat NOT working

Question

I have an ng-repeat and it's repeating data successfully. Now, i want to filter the results by properties i type into an input box. However, it either doesn't work at all or, if i try various things sometimes NOTHING gets displayed, at all. As you can see it's a work in progress and i've tried out a bunch of different stuff: hence why my code is inconsistent! Please, refrain from commenting on this as it's NOT CONSTRUCTIVE!

             <tr ng-if="vm.detail == true">
                    <th><input type="text" ng-model="filter.TrusteeCustNum" /></th>
                    <th><input type="text" ng-model="filter.MchNumber" maxlength="4" class="input-    sm form-control" /></th>
                    <th><input type="text" ng-model="filter.ContractNumber" class="input-sm form-control" /></th>
                    <th><input type="text" ng-model="vm.PlanCode" maxlength="10" class="input-sm form-control" /></th>
                    <th><input type="date" ng-model="filter.PlanStatusDate" /></th>
                    <th><input type="text" ng-model="filter.PlanStatus" /></th>
                    <th><input type="date" ng-model="filter.PlanEffectiveDate" /></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="plan in vm.PlanCodeInfo | filter: vm.PlanCode | orderBy:     vm.PlanCode" ng-if='vm.detail == true && vm.detailPlanCode'>
                    <td> {{plan.TrusteeCustNum}}</td>
                    <td>{{plan.CustomerNumber}}</td>
                    <td>{{plan.ContractNumber}}</td>
                    <td>{{plan.PlanCode }}</td>
                    <td>{{plan.PlanStatusDate | date: 'yyyy-MM-dd'}}</td>
                    <td>{{plan.PlanStatus}}</td>
                    <td> {{plan.PlanEffectiveDate | date: 'yyyy-MM-dd'}}</td>
                    <td><a href="">Rates</a></td>
                    <td><a href="">State Availability</a></td>
                </tr>

How can i get ANY filter to filter the results by the properties i'm using and sort them by those said properties?

dfsq · Accepted Answer · 2014-10-22 14:54:25Z

3

If you want to filter by property PlanCode then filter should be an object with specified property:

ng-repeat="plan in vm.PlanCodeInfo | filter:filterObj"

Where in HTML you define filter input with corresponding ngModel. Of course you can use multiple properties to filter by. Here is an example of PlanCode and PlanStatusDate filters:

<input type="text" ng-model="filterObj.PlanCode">
<input type="text" ng-model="filterObj.PlanStatusDate">

answered Oct 22, 2014 at 14:54

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

user3271518 Over a year ago

i was just typing this

user1789573 Over a year ago

i tried g-repeat="plan in vm.PlanCodeInfo | filter:filter" very first thing. However, this won't let anything get displayed. I just circumvented it with this line: <tr ng-repeat="contract in vm.ContractInfo | filter: filter.TrusteeCustNum | filter: filter.MchNumber| filter: filter.ContractNumber| filter: filter.PlanCode| filter: filter.PlanEffectiveDate" ng-if="vm.detail == true && vm.detailContract == true">

Marc Schlechter · Accepted Answer · 2014-10-22 14:26:21Z

0

Does vm.PlanCode exist in your $scope? Have you tried replacing it with a simple name like "planCode" and adding $scope.planCode = ''; to your $scope?

Just to see if it makes a difference?

It would be helpful to see your model / scope.

answered Oct 22, 2014 at 14:26

Marc Schlechter

212 bronze badges

1 Comment

user1789573 Over a year ago

Yes, i've tried that. Also, i know that planCode is in my scope since i debugged it and looked at what was in $scope. I'm wondering, though, if a filter cannot be applied to a row? Does it have to be on the <tbody> tag instead?

user1789573 · Accepted Answer · 2014-10-22 14:45:30Z

0

filter: filter.PlanCode is the code i needed to filter by planCode. Also, i have to change the ng-model to filter.PlanCode.

answered Oct 22, 2014 at 14:45

user1789573

5352 gold badges8 silver badges25 bronze badges

Collectives™ on Stack Overflow

AngularJS filter by property using Ng-Repeat NOT working

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related