Javascript 在控制器中实现角度滤波器的动态化

我还看到过其他一些帖子，我认为这些帖子可能会有所帮助，但运气不好。当我静态地指定要使用什么属性进行过滤时，我有一个可以正常工作的过滤器。我正在构建一个角度组件，我不知道什么数据将实际传递到组件中。例如，以下是一些示例数据：

this.customers = [
  { name: 'Jim', city: 'Minneapolis', state: 'MN', zip: 44332 },
  { name: 'Boe', city: 'Scottsdale', state: 'AZ', zip: 44332 },
  { name: 'Tom', city: 'S.F.', state: 'CA', zip: 11223 },
  { name: 'Joe', city: 'Dallas', state: 'TX', zip: 34543 },
  { name: 'Jon', city: 'L.A.', state: 'CA', zip: 56433 }
];

我的静态过滤器工作得很好：

public filterTextChangeLocal($event: ng.IAngularEvent) {
  if (this.itemDisplayProperty = "name") {
    this.filteredItems = this.$filter("filter")(this.items, {name: this.ngModelValue});
  } else if (this.itemDisplayProperty = "city") {
    this.filteredItems = this.$filter("filter")(this.items, {city: this.ngModelValue});
  } else if (this.itemDisplayProperty = "state") { 
    this.filteredItems = this.$filter("filter")(this.items, {state: this.ngModelValue});
  } else if (this.itemDisplayProperty === "zip") {
    this.filteredItems = this.$filter("filter")(this.items, {zip: this.ngModelValue});
  }
}

问题是组件的用户可能传入任何类型的数据，其属性可能完全不同，因此我需要一些可以解释任何指定属性的内容。我有一个名为itemDisplayProperty的隔离作用域属性，它允许用户从他们的数据中指定要在下拉列表中显示的属性，这就是我需要筛选的属性。他们可以说，item display property=address，address属性中的数据将显示在下拉列表中。我尝试了此操作，但不起作用。不允许使用此单词：

this.filteredItems = this.$filter("filter")(this.items, {
  this.itemDisplayProperty : this.ngModelValue
});

以下是我的输入和下拉列表供参考：

<input type="text" class="form-control" 
       ng-change="ctrl.filterTextChangeLocal($event)" 
       ng-model="ctrl.ngModelValue" 
       ng-click="ctrl.openDropdown($event)" />

<ul class="dropdown-menu list-group" ng-if="!ctrl.ngDisabled">
  <li class="list-group-item" 
      ng-repeat="row in ctrl.filteredItems" 
      ng-mousedown="ctrl.onSelectedLocal(row, $event)">

    {{row[ctrl.itemDisplayProperty]}}
  </li>
</ul>

为了重构filterTextChangeLocal中的静态过滤器，您需要做的就是构造一个带有动态键的$filter表达式

这可以通过使用所谓的：

重构后的filterTextChangeLocal将如下所示：

public filterTextChangeLocal($event: ng.IAngularEvent) {
    var filterExpression = {};
    filterExpression[this.itemDisplayProperty] = this.ngModelValue;

    this.filteredItems = this.$filter("filter")(this.items, filterExpression);
}

---

我用这种方式解决了自己的问题，这似乎是一种在对象内部使用变量的新ES6方式。有标记的答案也同样有效：

 this.filteredItems = this.$filter("filter")(this.items, {[this.itemDisplayProperty] : this.ngModelValue});

---

好的，没错，在ES6中，你可以使用计算出的比例

使用ES5，您可以使用var self=this创建这样的过滤器对象；在控制器中：

var filterObj = {};
filterObj[self.itemDisplayProperty] = self.ngModelValue;
self.filteredItems = $filter("filter")(self.items, filterObj);

请看下面的演示或这个

只需注意变量名。避免在姓名中使用ng前缀，例如在代码中使用ngDisabled。因为这个变量与AngularJs无关，不同的名称将使代码更具可读性。像showDrop这样的东西会更好

角度。模块'demoApp'，[] .controller'mainController'，mainController .指令'dynFilter'，dynFilter指令； 函数DynFilterDirective$filter{ 返回{ 限制：'E'， controllerAs:'ctrl'， templateUrl:'components/dynFilterTempl.html'， bindToController：{ 项目：“=”， itemDisplayProperty:“=” }, 作用域：{}， 控制器：功能{ var self=这个； self.filterTextChangeLocal=函数$event{ var filterObj={}； filterObj[self.itemDisplayProperty]=self.ngModelValue； console.logfilterbj； self.filteredItems=$filterfilterself.items，filterObj； }; } } } 函数main控制器$filter{ var vm=这个； vm.items=[ {姓名：'Jim'，城市：'Minneapolis'，州：'MN'，邮编：44332}， {名称：'Boe'，城市：'Scottsdale'，州：'AZ'，邮编：44332}， {姓名：'Tom'，城市：'S.F.，州：'CA'，邮编：11223}， {姓名：'Joe'，城市：'Dallas'，州：'TX'，邮编：34543}， {姓名：'Jon'，城市：'L.A.，州：'CA'，邮编：56433}， ]; vm.keys=Object.keysvm.items[0]； vm.curProp=vm.keys[0]； } {{Object.keysmainCtrl.items[0]} 选择您的过滤器： {{row[ctrl.itemDisplayProperty]}

---

谢谢Cosmin，在刷新和查看您的帖子之前，我为自己的问题添加了一个答案。这基本上是相同的想法，也会非常有效。我会记下答案。感谢您的时间。我将其添加到我的项目中，并且工作正常…谢谢：

var filterObj = {};
filterObj[self.itemDisplayProperty] = self.ngModelValue;
self.filteredItems = $filter("filter")(self.items, filterObj);