使用过滤器创建数组,然后使用该数组过滤 ng-options [英] Using filter to create array, then using that array to filter ng-options

查看:26
本文介绍了使用过滤器创建数组,然后使用该数组过滤 ng-options的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

  1. 我正在使用 isteven-multi-select 从一个选择元素的多个选择中输出一个对象数组.

    <预><代码>[{类别:冒险",勾选:真实},{ 类别:策略",勾选:真实 }]


2.然后使用angular.forEach将对象数组更改为类别值数组.

$scope.testOutput = function () {angular.forEach($scope.output, function(value, prop, obj) {var categoryFiltered = [];categoryFiltered.push(value.category);console.log(categoryFiltered);});};categoryFiltered = ["冒险", "策略"];


3. 现在我需要使用 categoryFiltered 数组过滤掉 ng-repeat 中的其他类别.

HTML超li(ng-repeat='item in items | filter: {categories: categoryFiltered')


MongoDB 填充项目

<代码> {年份: 1962,类别:[冒险"]}, {年份: 1972,类别:[钓鱼"]}, {年份: 1982,类别:[策略"]}

实现这一目标的最佳方法是什么?

解决方案

编写自定义过滤器,然后您可以根据自己的喜好过滤类别(例如,您要过滤与所有指定类别匹配的项目吗?或者仅过滤某些类别?).

这是一个 plunkr 示例:http://plnkr.co/edit/Lv11QWumN7ktjfS15RpY?p=preview

它的主要部分,定义你的过滤器:

app.filter('filterByCategories', function() {返回函数(输入,类别){//input是要过滤的数组,categories是列表//要过滤的类别输入 = 输入 ||[];类别 = 类别 ||[];var 输出 = [];for (var i = 0; i < input.length; i++) {for (var j = 0; j 

然后您可以像这样使用自定义过滤器:

  • 或者:

    1. I am using isteven-multi-select to output an array of objects from a select element's multiple selections.

      [
        { category: "Adventure", ticked: true },
        { category: "Strategy", ticked: true }
      ]
      


    2. Then using angular.forEach to change the array of objects into an array of the category values.

    $scope.testOutput = function () {
        angular.forEach($scope.output, function(value, prop, obj) {
            var categoryFiltered = [];
    
            categoryFiltered.push(value.category);
            console.log(categoryFiltered);
        });
    };
    
    categoryFiltered = ["Adventure", "Strategy"];
    


    3. Now I need to use the categoryFiltered array to filter out the other categories in an ng-repeat.

    HTML
    
    ul
      li(ng-repeat='item in items | filter: {categories: categoryFiltered')
    


    MongoDB populating items

            {
              year: 1962,
              categories: ["Adventure"]
            }, {
              year: 1972,
              categories: ["Fishing"]
            }, {
              year: 1982,
              categories: ["Strategy"]
            }
    

    What is the best way to achieve this?

    解决方案

    Write a custom filter, then you can filter the categories however you like (eg. do you want to filter items that match ALL the categories specified? Or only some?).

    Here's a plunkr example: http://plnkr.co/edit/Lv11QWumN7ktjfS15RpY?p=preview

    Main part of it, to define your filter:

    app.filter('filterByCategories', function() {
        return function(input, categories) {
          // Input is the array to be filtered, categories is the list of
          // categories to filter by
          input = input || [];
          categories = categories || [];
    
          var output = [];
          for (var i = 0; i < input.length; i++) {
            for (var j = 0; j < categories.length; j++) {
              // If input matches any of the categories, then add it to the list
              if (input[i].categories.indexOf(categories[j].trim()) >= 0) {
                output.push(input[i]);
                break;
              }
            }
          }
    
          return output;
        };
      })
    

    Then you can use the custom filter like so:

    <li ng-repeat="item in data | filterByCategories: filterStr.split(',')">

    Or:

    <li ng-repeat="item in data | filterByCategories: ['Adventure', 'Strategy']">

    这篇关于使用过滤器创建数组,然后使用该数组过滤 ng-options的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

  • 查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆