Question

I was playing with angular.js the other day and I found this filter function, that angular.js provides for us.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

      Search: <input ng-model="query">

    </div>
    <div class="span10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query">
          {{phone.name}}
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

My question is: Can I use angular.js filter on premade html elements, somehing like this.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

      Search: <input ng-model="query">

    </div>
    <div class="span10">
      <!--Body content-->

      <ul class="phones" ng-filter:query>
        <li>First element</li>
        <li>Second elementy/li>
        <li>Third element</li>
      </ul>

    </div>
  </div>
</div>

Thank you for your answers!

Answer 1

For this kind of DOM manipulation/filtering, Angular directives ngSwitch or ngShow/ngHide are normally used.

<ul class="phones" ng-switch on="query">
<li ng-switch-when="Nexus S">First element</li>

The above would look for an exact match though (so it is not as nice as @tosh’s directive). ng-switch is often used with a select drop-down, where the possible values are fixed/known.

ngShow/ngHide are probably a better match for what you are trying to do. An in-line expression or $scope function can be used to determine whether to show an element:

<li ngShow="some expression using query">First element</li>
<li ngShow="myFilter()">First element</li>

function MyCtrl($scope) {
    $scope.myFilter = function() {
       if($scope.query ...) {  // could use RegExp() here like @tosh
          return true
       }
       return false
    }

The above does not require jQuery.