search

Home  >  Q&A  >  body text

angular.js - About filter issues in angularjs

<li ng-repeat="phone in phones|filter:query">

Generally, filtering is written like this, but I want to target only part of the data. How to implement filtering on phone.name? ?

滿天的星座滿天的星座2859 days ago618

reply all(3)I'll reply

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-15 16:58:17

    <li ng-repeat="phone in phones|filter:{'name': query}">

    reply
    0
  • 漂亮男人

    漂亮男人2017-05-15 16:58:17

    According to the official documentation, there are several ways to achieve this:
    {{ filter_expression | filter : expression : comparator}}

    1. As the method given by Guox, use expression:

    Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1".

    Used as an Object, used to filter specified attributes of array elements, such as expression = {name: "M", phone: "1"}, then the array whose name contains 'M' and phone contains '1' will be filtered out element.

    So just use the following method

    <li ng-repeat="phone in phones|filter:{name:query}">
    

    2. You can use comparator:

    Comparator which is used in determining if the expected value (from the filter expression) and actual value (from the object in the array) should be considered a match.
    function(actual, expected): The function will be given the object value and the predicate value to compare and should return true if both values ​​should be considered equal.

    The return value of Comparator can be used to determine whether there is a match. The input parameters are actual (elements in the array) and expected (input)

    Then define a function

    $scope.customerFilter = customerFilter;
    
    function customerFilter(actual, expected){
        return actual.name.contains(expexted) ? true : false;
    }
    
    前端使用
    <li ng-repeat="phone in phones|filter:query:customerFilter">
    

    reply
    0
  • 習慣沉默

    習慣沉默2017-05-15 16:58:17

    Thank you both so much, thank you

    reply
    0
  • Cancelreply