angularjs Angular 传递控制器变量到html自定义过滤器参数在ng重复被填充在一个函数，所以我可以在html使用后

yhuiod9q 于 2023-04-28 发布在 Angular

关注(0)|答案(1)|浏览(113)

目前，我有一个控制器，一个过滤器文件和html。现在我有了它，所以在html中，我调用了一个ng-repeat，里面有一堆我基于过滤器im创建的自定义过滤器，例如：
ng-repeat="p in persons = (person | toArray | filterHeight:height | filterAge:age | filterEthnicity:ethnicity)"
我想添加的是基本上只更改filterEthnicity函数，以便如果我选择按种族进行过滤，它将在列表的顶部显示选定的种族组，并在过滤结果下方显示其余未选定的组。基本上是一个“未经过滤的列表”。我看到的解决方案是，在函数中，我可以将其更改为返回对象或多个数组，但这对我不起作用，因为我使用1 ng-repeat进行的所有其他过滤器，所以我只能返回一个数组。我看到我可以做这样的事情：filterEthnicity：ethnic：unfiltered在html中使用在controller $scope中创建的变量。未经过滤
我得到的问题是，在函数中，我需要在每次调用时重置值，例如unfiltered = []，但当我添加该值并在控制器中打印值时，它始终为空，但在函数中它被填充
在控制器中，我创建了一个类似$scope的变量。未过滤= []

.filter('filterEthnicity', function() {
    return function(values, keys, unfiltered) {
        let filtered = [];
        unfiltered = []
        values.forEach(obj => {
            if (obj.person.ethnicity in keys) {
                filtered.push(obj);
                break;   
            }
            if (filt_list.indexOf(obj) === -1) {
                unfiltered.push(obj);
            }
        });
        return filtered;
    }
});

所以在代码中，当我在filterEthnicity函数中打印未过滤时，它正在被填充，但当我尝试打印$scope时。在控制器中未过滤它是空的，所以当我尝试在第一个ng-repeat之后在html中使用它时，就像简单的第二个ng-repeat一样
ng-repeat="val in unfiltered"{{val.name}}
结果什么都没有
我主要是困惑为什么$范围。未筛选的变量一直显示为空。

angularjs

来源：https://stackoverflow.com/questions/76102357/angular-passing-in-controller-variable-to-html-custom-filter-parameter-in-ng-rep

1条答案

按热度按时间

wko9yo5t1#

试试这个
创建一个Angular模块并定义一个名为startsWithLetter的自定义过滤器，该过滤器根据每个字符串是否以指定的字母开头来过滤字符串数组：

angular.module('demoApp', []).filter('startsWithLetter', function() {
    return function(items, letter) {
      var filtered = [];
      angular.forEach(items, function(item) {
        if (item.charAt(0).toLowerCase() === letter.toLowerCase()) {
          filtered.push(item);
        }
      });
      return filtered;
    };
  });

startsWithLetter过滤器接受两个参数：items，要筛选的字符串数组，letter，要筛选的字母。过滤器逻辑很简单：它遍历items数组中的每个项目，检查项目的第一个字母是否与指定的字母匹配，如果匹配，则将项目添加到筛选的数组中。
接下来，让我们创建一个Angular控制器，它定义了一个字符串数组和一个变量来存储要过滤的字母：

angular.module('demoApp').controller('DemoCtrl', function() {
    var vm = this;
    vm.items = ['Apple', 'Banana', 'Carrot', 'Date', 'Eggplant'];
    vm.letter = 'a';
});

DemoCtrl控制器使用controllerAs语法来定义一个变量vm，用于存储控制器的属性。items属性是要筛选的字符串数组，letter属性存储筛选所依据的字母

<div ng-app="demoApp" ng-controller="DemoCtrl as vm">
  <label>Filter by letter:</label>
  <input type="text" ng-model="vm.letter">
  <ul>
    <li ng-repeat="item in vm.items | startsWithLetter:vm.letter">{{item}}</li>
  </ul>
</div>

ng-repeat指令用于迭代过滤后的vm。items数组，传递vm。将letter变量作为第二个参数添加到startsWithLetter筛选器

赞(0）回复(0）举报 2023-04-28

我来回答

angularjs Angular 传递控制器变量到html自定义过滤器参数在ng重复被填充在一个函数，所以我可以在html使用后

1条答案

相关问题

热门标签

最新问答