Question

我是AngularJS的新手，我正在尝试使用ng-repeat来显示我学校可用的模块。此外，尝试使用过滤器功能通过文本框过滤掉模块（ModuleCode和ModuleTitle）。然而，经过几个小时的尝试，我没有做到：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;
    }
};

Answer 1

只需更改

<强>这样：

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

作为

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

代码段正在运作：

＆＃13;
＆＃13;
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 }); } });
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

我建议您查看filter的{{3}}。

我希望它有所帮助！

使用标记无效的AngularJS过滤

1 个答案: