在AngularJS表中使用过滤器

Question

I'm creating a web app in mvc with angularjs in which i want to filter the data inside my table but I'm getting error while I debug my code.

This is what the error is

Error: $rootScope:infdig Infinite $digest Loop 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: []

I tried something like this

<tr ng-repeat="d in dataintbl| filter:search">

and I added another tr in my thead

<td>
    <input type="text" ng-model="search.taskstartdate" placeholder="" class="erp-input" />
</td>

this is how my table looks

<table class="table table-bordered">
    <thead>
    <tr class="bg-primary">
        <th>Task Name</th>
        <th>Start Date</th>
        <th>End Date</th>
        <th>Priority</th>
        <th>Action</th>
        <th ng-hide="true">autoid</th>
    </tr>
    <tr>
        <td>
            <input type="text" ng-model="search.taskstartdate" placeholder="" class="erp-input"/>
        </td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="d in dataintbl" ng-class="{'changecolor':(d.IsCompleted=='True')}">
        <td><a href="#" style="cursor:pointer;" ng-click="showdetails(d)" data-toggle="modal" data-target="#myModalc">{{d.taskname}}</a>
        </td>
        <td>{{d.taskstartdate}}</td>
        <td>{{d.taskenddate}}</td>
        <td ng-class="{'greenrow': (d.taskpriority == 'Low'), 'yellowrow': (d.taskpriority == 'Medium'), 'redrow': (d.taskpriority == 'High')}">
            {{d.taskpriority}}
        </td>
        <td>
            <span ng-class="{'hidespan':(d.IsCompleted=='False')}">Completed</span>
            <div ng-class="{'hidebutton':(d.IsCompleted=='True')}">

                <a href="#" ng-click="updatetask(d)" data-toggle="modal" title="EDIT TASK" data-target="#myModalb"
                   class="btn btn-warning glyphicon glyphicon-edit"></a>
                <a href="#" ng-click="deleteuser(d)" title="DELETE TASK"
                   class="btn btn-danger glyphicon glyphicon-trash"></a>
                <a href="#" ng-click="taskcompleted(d)" title="COMPLETE TASK"
                   class="btn btn-success glyphicon glyphicon-ok"></a>
            </div>
        </td>
    </tr>
    </tbody>
</table>

I just want to understand, how can i give filters to the users?

Answer 1

you need to change the following line

<tr ng-repeat="d in dataintbl" ng-class="{'changecolor':(d.IsCompleted=='True')}">

to something like this

<tr ng-repeat="d in dataintbl | filter:search.taskstartdate" ng-class="{'changecolor':(d.IsCompleted=='True')}">

and everything is looking fine