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?

Answer 1

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

Answer 2

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.

Answer 3

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