【问题标题】:AngularJS - Array as filterAngularJS - 数组作为过滤器
【发布时间】:2018-06-11 10:20:44
【问题描述】:

如何在ng-repeat 中设置使用字符串和字符串数组的过滤器?

HTML

<div ng-repeat="type in types| orderBy : 'name' | filter:{typology:currTipology}"

JavaScript

var myData = ['string_1', 'string_2', ['string_3', 'string_4']];

我将为每个 myData 条目使用一个按钮,将字符串值分配给 ´currTipology`。

更新 我试图更好地解释我的问题。 我有一个具有 6 个不同“类型”属性的主要对象数据。 我需要放置 4 个按钮:按钮 1 到 3 对应于 1 到 3 个“类型”属性;最后一个按钮必须过滤 4 到 6 个“类型”属性。 我应该如何为最后一个按钮使用过滤器?

【问题讨论】:

  • 过滤器的意义何在?
  • 我必须选择 'string_1' 和 'string_2' 之后的任何值

标签: javascript arrays angularjs angular-filters


【解决方案1】:

对于多个过滤器,您可以使用类似这样的功能来做一些事情

<div ng-repeat="employee in employees | filter:{name: companyName} | filter:gradeFilter">

在控制器中你有你的过滤功能,比如

$scope.gradeFilter = function (employee) {
   if(employee.salary > 70000 && employee.exp > 3){ 
      return "Senior"
   } 
}

【讨论】:

    【解决方案2】:

    您可以通过以下方式使用过滤器

    <div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
       <input ng-model="subject.title" />
    </div>
    

    【讨论】:

    • 我知道如何使用过滤器。我需要知道如何使用“混合”过滤器
    【解决方案3】:

    请参阅下面的代码 sn-p 以解析子数组(这仅适用于 2 层深度数组)。希望它能完成工作:)

    var app = angular.module("app", []);
    
    app.controller("AppCtrl", function ($scope) {
      $scope.myData = ['string_1', 'string_2', ['string_3', 'string_4']];
      
      $scope.isArray = function (type) {
        return typeof type === 'object';
      }
      
      $scope.isString = function (type) {
        return typeof type === 'string';
      }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <div ng-app="app" ng-controller="AppCtrl">  
      <div ng-repeat="type in myData">
        <div ng-if="isString(type)">
          {{type}}
        </div>
        <div ng-if="isArray(type)" ng-repeat="subtype in type">
          {{subtype}}
      </div>
    </div>

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-03-23
    • 1970-01-01
    • 1970-01-01
    • 2014-08-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多