在AngularJS表中使用过滤器

时间:2017-03-27 07:30:33

标签: javascript html angularjs filter

我在mvc with angularjs中创建了一个网络应用,我希望在其中过滤表格中的数据,但在调试代码时遇到错误。

这就是错误is

  

错误:$ rootScope:infdig Infinite $ digest循环10 $ digest()迭代   到达。中止!观察者在最近5次迭代中被解雇:[]

我试过这样的事情

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

我在tr

中添加了另一个thead
<td>
    <input type="text" ng-model="search.taskstartdate" placeholder="" class="erp-input" />
</td>

这就是我的表格外观

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

我只想了解,如何向用户提供过滤器?

1 个答案:

答案 0 :(得分:0)

您需要更改以下行

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

这样的事情

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

一切都很好看