如何在ng-repeat的过滤器中输入js变量

时间:2018-07-17 13:58:36

标签: javascript html angularjs

我有这个:

<div ng-repeat="i in MediaFeedItems | filter: { category: 'userSelect' }" class="mediafeed--item"> 

这会遍历列表,并基于称为“类别”的属性进行过滤。用户通过下拉菜单选择过滤器,然后在以下功能中将选择分配给变量“ userSelect”:

document.getElementById('category').addEventListener("change", function() {
    if(this.value == "HR") {
        this.userSelect = "HR";
    } else if (this.value == "Managers") {
        this.userSelect = "Managers";
    } else {
        this.userSelect = "Colleagues";
    }
});

如何在过滤器中调用该变量?

1 个答案:

答案 0 :(得分:1)

不要以为您只需要在所选模型上放置ng模型并将其用于过滤器

(function() {
    'use strict';
angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

   function myCtrl(){
       /* jshint validthis: true */
       var vm=this;
       vm.items = [
                   {category: 'cat1', text: 'one'},
                   {category: 'cat1', text: 'two'},
                   {category: 'cat2', text: 'three'},
                   {category: 'cat2', text: 'four'},
                   ];
   } 

})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl as vm">
  <select name="singleSelect" ng-model="category">
      <option value="cat1">category 1</option>
      <option value="cat2">category 2</option>
    </select>
    <div class="row" ng-repeat="item in vm.items | filter: { category: category }">
            {{item.text }}
      </div>
    </div>
  </div>