FilterText 与 angularjs答案

【问题标题】：FilterText with angularjsFilterText 与 angularjs
【发布时间】：2014-02-19 16:14:49
【问题描述】：

我有一个简单的 searchController：

testapp.controller("searchController", function($scope, $rootScope, $http, $location) {

    $scope.filterText = null;

    var load = function() {
        console.log('call load()...');

        var url = 'product.json';

        if($rootScope && $rootScope.appUrl) {
            url = $rootScope.appUrl + '/' + url;
        }
        console.log(url);

        $http.get(url)
        .success(function(data, status, headers, config) {
            $scope.product = data;
            angular.copy($scope.product, $scope.copy);
        });
    }

    load();

});

如你所见，我已经声明了 filterText。我的看法是这样的：

<div class="container main-frame" ng-app="testapp"
    ng-controller="searchController" ng-init="init()">
    <h1 class="page-header">Products</h1>
    <!-- Filter Start -->
    <div class="search-box row-fluid form-inline">
        <label>Filter: </label> <input type="text" ng-model="filterText" /> 
    </div>
    <div class="results-top"></div>
    <!-- Filter End -->
    <table class="table">
        <thead>
            <tr>
                <th width="25px">ID</th>
                <th>TITLE</th>
                <th>PRICE</th>
                <th>Description</th>
                <th width="50px"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="p in product track by p.id | filter: filterText">
                <td>{{p.id}}</td>
                <td>{{p.title}}</td>
                <td>{{p.price}}</td>
                <td>{{p.description}}</td>
            </tr>
        </tbody>
    </table>
    <!-- ng-show="user.username" -->
    <p>
</div>

我的问题是在输入内容时没有任何反应。有什么建议可以解决这个问题吗？

感谢您的回答！

【问题讨论】：

如果你提供 JSfiddle/Plunker 给我们，那就太棒了:)
@ArtyomPranovich 感谢您的回答！我在这里简化了我的工作：plnkr.co/edit/IYtzuGfDsNfo9RYJ2LdO?p
1.没有 init() 函数 2. 不要使用 ng-init 3. filterText 为空且永不改变
@FooL Ok 在 plunker 上更改了 1 和 2。如何给 filterText 一个值？
为什么不直接使用<tr ng-repeat="p in product | filter: filterText">？

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

与track by 表达式相关的问题。

请尝试在ng-repeat 末尾添加track by：

<tr ng-repeat="p in product | filter: filterText track by p.id">

或者完全删除track by。

我使用正确的代码创建 JSFiddle。请看：

JSFiddle

【讨论】：