AngularJS



  • I'm studying AngularJS on https://docs.angularjs.org/tutorial/step_05 There's also a living demo: http://angular.github.io/angular-phonecat/step-5/app/

    Search: <input ng-model="$ctrl.query" />
    <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query">
       <span>{{phone.name}}</span>
       <p>{{phone.snippet}}</p>
    </li>
    

    So that's how it works. filter:$ctrl.query? Clearly, the cycle runs all over the site. phonesand if there is a concurrence with the text in place, the current value shall be extramitted after filtering. But the filter is so designed that it can see all the fields, even those that are visually undetectable. For example, if our phones are like:

    [
        { 
            "name": "Motorola XOOM with Wi-Fi", 
            "snippet": " ... ",
            "sys": "hidden value"
        }, 
        {
            "name": "MOTOROLA XOOM", 
            "snippet": "... ",
            "sys": "hidden value"
        }
    ]
    

    and <input ng-model="$ctrl.query" /> Introduction hidden valuethe filter will work, too. I'd like to filter only the field name. Or use the filter as a regular expression. Let's say any letter can be replaced by a star. So, how do we fulfil the filter function?



  • Filter called filter "produce" through the inlet and return the mass with the elements that correspond to the intended expression.
    The filter has a view: {{ исходный_массив | filter : выражение_для_поиска : функция_сравнения}}
    In your case, a standard function is used to compare.

    In order to search a given field, you may be placed query In a field with a name you want to search. That's it.
    <li ng-repeat="phone in $ctrl.phones | filter:{name: $ctrl.query}">

    To use regex, you'll need to write your own comparator:
    To counterer:

    this.comparator = function(source, query) {
      return (new RegExp(query)).test(source);
    }
    

    In the box:
    <li ng-repeat="phone in $ctrl.phones | filter:{name: $ctrl.query}:$ctrl.comparator">




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2