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

Posted 2023-02-22

【中文标题】ng-repeat 基于下拉选择或搜索输入

【英文标题】：ng-repeat based on dropdown selection or search input

【发布时间】：2015-06-27 07:29:28

【问题描述】：

使用$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;);
);

我才真正开始使用 angular，所以欢迎任何建议！

【参考方案1】：

更简洁的方法是使用手表组或手表集合...

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

您可以在这里查看 plunk：http://plnkr.co/edit/BXTGpNsGeqT9kVsGnEOg?p=preview

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

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

编辑：plunk 已修复：请参阅 this 帖子。还是觉得有更好的办法……

Edit2：better 更易维护的版本

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

宁可有一个单独的 ng-change 函数来执行。将参数传递给它并相应地处理逻辑

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

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

【讨论】：

看起来是个不错的选择。谢谢你的笨蛋。我将尝试快速集成我的 json。 +1

【参考方案2】：

使用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">

【讨论】：

感谢您的回复，虽然这似乎禁用了它们，所以我无法访问。

【参考方案3】：

我不是专业以太坊，但如果您使用第三个值作为过滤依据，并将其他两个值保存到范围内，这可能会有所帮助。

你可以使用$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 ">

【参考方案4】：

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

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

【讨论】：

这是因为用户可以同时过滤两个字段吗？听起来您的目标是让这些过滤器成为“一个或另一个，但绝不是两者”的设置？

这是我的目标，但我在这里问，因为我缺乏这样做的知识。在使用另一个时，我是否必须以某种方式禁用一个？