我们无法弄清楚当我们在ng-model中使用“keyword.name”时过滤器如何工作,而在过滤器中我们使用“filter:keyword”

时间:2017-05-25 07:29:25

标签: javascript angularjs

我是棱角分明的新手。我无法弄清楚过滤器如何仅对象中的名称而不是对象中的电话键上的名称。如果我们在ng-model中仅使用关键字,它将过滤范围中定义的对象中的名称和电话。在keyword.name的情况下,它将仅过滤掉名称。

<script>

    var app = angular.module("app" , []);
    app.controller("controller" ,['$scope' , function($scope){

        $scope.answer = 1+2;
        $scope.object=[

        {name:'John', phone:'555-1276'},
        {name:'Mary', phone:'800-BIG-MARY'},
        {name:'Mike', phone:'555-4321'},
        {name:'Adam', phone:'555-5678'},
        {name:'Julie', phone:'555-8765'},
        {name:'Juliette', phone:'555-5678'}]

    }]);

</script>

    <div ng-app = "app" ng-controller="controller" >

    <input type="text" ng-model="keyword.name" />

    <table>
        <thead>
            <th>Name</th>
            <th>Phone</th>
        </thead>
        <tr ng-repeat = "item in object | filter: keyword" >

            <td> {{item.name}} </td>
            <td> {{item.phone}} </td>

        </tr>

    </table>



    </div>      



</body>

2 个答案:

答案 0 :(得分:0)

如果仅基于作为ng-model的关键字进行过滤,则默认情况下,angular会添加一个与任何属性匹配的特殊属性名称。默认情况下是$。因此,基于关键字作为ng-model的技术过滤与基于关键字的过滤相同。但是,如果您将一个属性附加到关键字,它将覆盖angular的默认特殊属性名称,并根据您的新键值过滤。

https://docs.angularjs.org/api/ng/filter/filter

答案 1 :(得分:0)

在这里,您将对象(关键字)作为过滤器中的表达式传递,以从数组中进行选择。您只声明了对象 keyword.name 的一个属性。您必须看到过滤器:关键字作为过滤器:{名称:“此值将为item.name”}。因此,这仅返回名称的数组项。

例如,如果你有ng-model =“ keyword.dance ”。然后必须看到过滤器:关键字作为过滤器:{舞蹈:“此值将为item.dance”}。在这里,他们将不会匹配,所以你会得到空白的结果。