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

18 浏览
0 Comments

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

使用 $http 获取一些json数据并把它放入表格中。我想让它可以从输入框中搜索json（这我已经做到了），我还希望根据下拉框的选择过滤json。目前我不需要同时进行双重过滤，所以我只想做到两者都可以，但不能同时进行。

以下是html代码：ng-repeat=\"x in names | limitTo: 10 | filter:search_targets\" 可以正常运行，但我也想按 indicator 进行过滤。

Parameters

 

 

Name</th Score
{{x.Name}} {{x.Country}}

 

 

以下是相关的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，所以欢迎任何建议！

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

更简洁的方法是使用watch组或者watch集合...
\n

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

\n你可以查看plunk的地址：http://plnkr.co/edit/BXTGpNsGeqT9kVsGnEOg?p=preview
\n你也可以参考以下帖子：https://stackoverflow.com/a/17224886/145682
\nPs: plunk有点奇怪的问题...希望我能解决它...
\n编辑: plunk已经修复：请看这个帖子。还是感觉有更好的方法...
\n编辑2: 更好、更易维护的版本请看这里
\n编辑3: 我正式修改了我的回答（因为我在第二次编辑中提到的帖子）。我认为这个方法比监听两个变量更简单。最好有一个单独的ng-change函数执行，传递参数并根据情况处理逻辑。
\n

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

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

0
0 Comments

我也不是专家，但如果你使用第三个值来过滤，并将其他两个值保存到作用域中可能会有所帮助。

你可以使用 $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 中添加这个：

0