jsfiddle过滤器无法在angularjs中工作

时间:2014-04-10 08:40:54

标签: javascript angularjs

这是jsfiddle,我可以让它使用true,false值,但是当我尝试按名称过滤时,它没有任何建议?

jsFiddle

 <div ng-controller="MyCtrl">

    <button class="btn" ng-click='filterCriteria={}'>All</button>
    <button class="btn" ng-click='filterCriteria.read=true'>Read</button>
    <button class="btn" ng-click='filterCriteria.title={{messages[0].title}}'>Foo</button>
    <pre>{{messages[0].title}}</pre>

    <hr/>
  <table class="table table-bordered">
      <thead>
          <tr>
              <td><strong>Title</strong></td>
              <td><strong>Content</strong></td>    
              <td><strong>Read</strong></td>    
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat='message in messages |filter:filterCriteria'>
              <td>{{message.title}}</td>
              <td>{{message.content}}</td>    
              <td>{{message.read}}</td>    
          </tr>
      </tbody>            
  </table>
</div>


    function MyCtrl($scope) {

    $scope.filterCriteria = {};

    $scope.messages = [{
        title: 'Foo',
        content: 'Foo content',
        read: false},
    {
        title: 'Bar',
        content: 'Bar content',
        read: true}
            ];
     }

3 个答案:

答案 0 :(得分:3)

由于您的filterCriteria未被清除,您将面临此问题。

Fiddle

请尝试按以下方式按名称进行过滤:

 $scope.filterByName= function(name){
    $scope.filterCriteria={},
    $scope.filterCriteria.title=name;
}

注意:我假设您在点击按钮并删除旧过滤器时询问有关新过滤的信息。

答案 1 :(得分:0)

我认为您不需要在ng-click

中使用{{}}

使用()

<button class="btn" ng-click='filterCriteria.title=(messages[0].title)'>Foo</button>

http://jsfiddle.net/JtAZM/43/

答案 2 :(得分:0)

请忽略括号:

<button class="btn" ng-click='filterCriteria.title=messages[0].title'>Foo</button>

作品here