Question

使用$http将一些json放入表中。我想拥有它所以我可以从输入（我已经工作）中搜索json，并且我还希望能够根据下拉列表中的选择过滤json。此时我不需要进行双重过滤，因此我只希望能够同时进行两次过滤。

以下是html代码，ng-repeat="x in names | limitTo: 10 | filter:search_targets工作正常，但我还希望过滤indicator

<div class="col s3"style="padding: 1vh;">
    <div class="grey darken-3"style="height: 98vh">
        <h4 class="right" style="padding:1vh">Parameters</h4>
        <div ng-app="myApp" ng-controller="customersCtrl" class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="search_targets" type="text" class="validate" ng-model="search_targets">
                        <label for="search_targets">Search Targets</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <select ng-model="indicator">
                            <option value="" disabled>Select Indicator</option>
                            <option value="Mexico">Mexico</option>
                            <option value="France">France</option>
                            <option value="3">Option3</option>
                            <option value="4">Option4</option>
                            <option value="5">Option5</option>
                            <option value="6">Option6</option>
                            <option value="7">Option7</option>
                            <option value="8">Option8</option>
                            <option value="9">Option9</option>
                            <option value="10">Option10</option>
                            <option value="11">Option11</option>
                            <option value="12">Option12</option>
                            <option value="13">Option13</option>
                            <option value="14">Option14</option>
                            <option value="15">Option15</option>
                            <option value="16">Option16</option>
                            <option value="17">Option17</option>
                            <option value="18">Option18</option>
                        </select>
                        <label>I.A.T Indicators</label></label>
                    </div>
                </div>
                <div class="col s12" style="
                    padding-left: 11.250px;
                    padding-right: 11.250px;
                    margin top:5vh;
                    ">
                    <table>
                        <thead>
                            <tr>
                                <th data-field="id">Name</th
                                <th data-field="name">Score</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="x in names | limitTo: 10 | filter:search_targets">
                                <td>{{x.Name}}</td>
                                <td>{{x.Country}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </form>
        </div>

这是相关的js：

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
        .success(function (response) {$scope.names = response.records;});
});

我只是真的开始使用角度，所以欢迎任何建议！

Answer 1

我不是专业人士，但如果您使用第三个值进行过滤，则可能会有所帮助，并将其他两个值保存到范围内。

您可以使用$ watch来触发值更改，并相应地修改第三个值。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
         .success(function (response) {$scope.names = response.records;});

    $scope.indicator="";
    $scope.search_targets="";
    $scope.thirdvariable="";

    $scope.$watch('search_targets', function(newval,oldval)
    {
        $scope.indicator="";
        $scope.thirdvariable=newval;
    }, true);
    $scope.$watch('indicator', function(newval,oldval)
    {
        $scope.search_targets="";
        $scope.thirdvariable=newval;
    }, true);
});

进入html就是这样：

<tr ng-repeat="x in names | limitTo: 10 | filter:thirdvariable ">

Answer 2

如果我误解了您的问题，我会提前道歉，但不会在ng-repeat添加以下过滤器来完成此操作：

<tr ng-repeat="x in names | limitTo: 10 | filter:search_targets | filter:indicator">

Answer 3

更简洁的方法是使用手表组或手表系列......

$scope.$watchCollection('[selCountry, searchText]', function(n, o, scope) {
    //logic to determine what changed...
});

您可以在此处查看插件：http://plnkr.co/edit/BXTGpNsGeqT9kVsGnEOg?p=preview

您还可以参考以下帖子：https://stackoverflow.com/a/17224886/145682

Ps：有一些奇怪的问题...希望我能解决它......

修改：plunk修复：请参阅this帖子。还是觉得还有更好的方法......

Edit2：better更易维护的版本

编辑3：我正在改变我的答案（因为在我的第二次编辑中指出了帖子）。我认为这种方法比观察两个变量更好......它更简单。

而是要执行单个ng-change功能。将参数传递给它并相应地处理逻辑

$scope.onChange = function(src) {
   if(src === 'txt') {
       //from text box
   }
   else {
       //from dropdown
   }
};

将ng-change="onChange('txt')"和ng-change="onChange('drp')"分别设置为文本框和下拉列表...

Answer 4

使用ng-init以及一对disabled属性可能会对您有所帮助。将ng-init添加到声明控制器的div，并通过将ng-init设置为空字符串来设置默认值“all”：

<div ng-app="myApp" ng-controller="customersCtrl" ng-init="search_targets=''; indicator=''" class="row">

然后为每个“选择区域”添加disabled属性。 indicator仅在search_targets == ""时作为用户的选择，而search_targets仅在indicator == ""时作为选择。这样，当用户过滤任一字段时，其他字段将被禁用作为选项：

<div class="input-field col s12" disabled="indicator != ''">

<div class="input-field col s12" disabled="search_targets != ''">

您的过滤器如下所示：

<tr ng-repeat="x in names | limitTo: 10 | filter:search_targets | filter:indicator">

基于下拉选择或搜索输入的ng-repeat

4 个答案: