使用 <tr> 标签的 AngularJS 过滤不起作用答案

【问题标题】：AngularJS filtering using <tr> tag not working使用 <tr> 标签的 AngularJS 过滤不起作用
【发布时间】：2016-11-13 11:24:18
【问题描述】：

我对 AngularJS 比较陌生，我正在尝试使用 ng-repeat 来显示我学校可用的模块。此外，尝试使用过滤器功能通过文本框过滤掉模块（模块代码和模块标题）。但是，经过数小时的尝试，我没有做到：C。有没有人指导我如何过滤我的数据？

angular.forEach(moduleList, function(value,key){
            $scope.modList.push({
                ModuleCode      : moduleList[key].ModuleCode,
                ModuleTitle     : moduleList[key].ModuleTitle,
                Semesters       : moduleList[key].Semesters
            });
});

<rd-widget>
        <rd-widget-header icon="fa-search" title="Module Search">

            <input type="text" ng-model = "searchBox" placeholder="Search" class="form-control input-md" ng-keypress="test($event)"/>
            <p>{{searchBox}}</p>
        </rd-widget-header>
        <rd-widget-body classes="medium no-padding">
            <div class="table-responsive">

                <table class="table fixed-header">
                    <thead>
                        <tr>
                            <th class="text-center" data-ng-click="orderBy('ModuleCode')">Module Code</th>
                            <th class="text-center"  data-ng-click="orderBy('ModuleTitle')">Module Name</th>
                            <th class="text-center" data-ng-click="orderBy('Semesters')">Semester</th>
                        </tr>
                    </thead>

                    <tbody>
                       <tr data-ng-repeat = "modules in modList | filter:filterMod">
                           <td class="text-center">{{modules.ModuleCode}}</td>
                            <td class="text-center">{{modules.ModuleTitle}}</td>
                            <td class="text-center">{{modules.Semesters}}</td>

                       </tr>


                    </tbody>
                </table> 
            </div>
        </rd-widget-body>
    <rd-widget>

        $scope.filterMod = function(module){
    if(!$scope.searchBox || module.ModuleCode.toLowerCase().indexOf($scope.searchBox) != -1){
        return true;
    }else{
        return false;
    }
};

【问题讨论】：

好吧，filterMod 是什么？
我已经更新了代码。它在btm。我认为尝试通过自定义过滤器功能进行过滤是行不通的

标签： angularjs filter html-table ng-repeat

【解决方案1】：

只是改变

这个：

<tr data-ng-repeat = "modules in modList | filter:filterMod">

为：

<tr data-ng-repeat="modules in modList | filter: { ModuleCode: searchBox }">

一个 sn-p 工作：

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  $scope.modList = [];
  for (var i = 1; i <= 10; i++) {
    $scope.modList.push({
      "ModuleCode": "Code " + Math.floor(Math.random() * 100) + 1,
      "ModuleTitle": "Title " + Math.floor(Math.random() * 100) + 1,
      "Semesters": "Semester " + Math.floor(Math.random() * 100) + 1
    });
  }
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <input type="text" ng-model="searchBox" placeholder="Search" class="form-control input-md" ng-keypress="test($event)" />
  <p>{{searchBox}}</p>
  <table class="table fixed-header">
    <thead>
      <tr>
        <th class="text-center" data-ng-click="orderBy('ModuleCode')">Module Code</th>
        <th class="text-center" data-ng-click="orderBy('ModuleTitle')">Module Name</th>
        <th class="text-center" data-ng-click="orderBy('Semesters')">Semester</th>
      </tr>
    </thead>

    <tbody>
      <tr data-ng-repeat="modules in modList | filter: { ModuleCode: searchBox }">
        <td class="text-center">{{modules.ModuleCode}}</td>
        <td class="text-center">{{modules.ModuleTitle}}</td>
        <td class="text-center">{{modules.Semesters}}</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

我建议你检查filter 的API reference。

希望对你有帮助！

【讨论】：

我以前试过。它也不起作用。它有一个错误。错误：$parse:syntax 语法错误语法错误：标记“{”是表达式 [modList |] 的第 18 列中的意外标记，从 [{4}] 开始。
@developer333 我明白你的意思。我在研究解决方案时看到了它并对其进行了测试。但它只是没有为我过滤它。我也不知道为什么。
@YaocongTiong，我不知道为什么它不起作用。正如您在上面的简单 demo 中看到的那样，它的工作原理。您可以在这里发布您的array 数据实际上如何？我的意思是modList。
我不认为。数组数据有任何错误。当我用你创建的相同pl替换它时，它也不起作用。
@YaocongTiong，我注意到我在filter关键字后面漏掉了（:），是-> <tr data-ng-repeat="modules in modList | filter: { ModuleCode: searchBox }">，你现在可以检查一下吗？