【问题标题】:Angular custom filter that returns if the array has the matching string如果数组具有匹配的字符串,则返回角度自定义过滤器
【发布时间】:2017-06-16 04:01:58
【问题描述】:

为了解决这个问题,我一直在摸不着头脑。我觉得我快到了,但不能让最后一块正确地让它工作。这就是我想要做的。我正在创建一个自定义过滤器,它将遍历我的 json 数组以查看是否有“status”键,如果该“status”键包含“SUCCESS”字段,它将返回与该数组匹配的所有对象。如果“状态”键不存在,则不显示数组对象。我可以看到我的循环看起来是正确的,因为它正在确定哪个对象数组包含关键字,但是当我尝试打印我的结果时,我什么也没看到。请帮忙!

这是演示。
https://jsfiddle.net/missggnyc/6r9oophu/20/

HTML

<div ng-app="mySessions">   
    <div ng-controller="sessionController">
  <table>
    <tr>
      <td>Session ID</td>
      <td>Session Name</td>

    </tr>
    <tr ng-repeat="cs in cSessions | successSessionFilter"> 
      <td>{{cs.id}}</td>
      <td>{{cs.session_name}}</td>          
    </tr>
  </table>
</div>

JS

var app = angular.module('mySessions', []);
app.controller("sessionController", ['$scope', function($scope){
        $scope.cSessions = [
    {"id":2,"session_name":"BD20","session_description":"","status":["INPROGRESS"]}, 
    {"id":3,"session_name":"CS03","session_description":"","status":["INPROGRESS", "SUCCESS"]},
    {"id":4,"session_name":"MIS99","session_description":"","status":["FAIL","NOTINPROGRESS"]},
     {"id":5,"session_name":"XGY7","session_description":"","status":["SUCCESS", "NOTINPROGRESS"]},
      {"id":6,"session_name":"DCCC2","session_description":""},
        {"id":7,"session_name":"IUOS33","session_description":""}
    ];
}]);
app.filter('successSessionFilter', function(){
        return function(cObj){          
            angular.forEach(cObj, function(value, key){
                angular.forEach(value, function(v, k){
                    //console.log('k is ' + k + ' and v is '+ v);
                    if(k === 'status'){
                        if(v.indexOf("SUCCESS") > -1){ //if it exists
                            //console.log("SUCCESS exists  "+ v.indexOf("SUCCESS"));
                            //console.log(v);
                            return true;
                        }
                        else { //it the status field isn't there, then don't show the object
                            return false;
                        }                       
                    }
                    else 
                        return false;
                })          
            })
    // console.log(cObj);
        }
    });

【问题讨论】:

    标签: javascript angularjs arrays foreach angularjs-filter


    【解决方案1】:

    更简单的方法。只需将 tr ng-repeat 修改为

    <tr ng-repeat="cs in cSessions | filter:'SUCCESS'"> 
              <td>{{cs.id}}</td>
              <td>{{cs.session_name}}</td>          
    </tr>
    

    查看实际操作:https://jsfiddle.net/hm4h2esj/

    【讨论】:

    • 如果你有 "session_name":"SUCCESS" 怎么办?然后就不行了
    • 我认为 session_name 不会成功,因为从给定的数据集中, session_name 是字母数字。如果更改键名,您的方法可能会失败。
    • 如果状态数组在另一个数组中怎么办?这种方法不适用于这种情况。就像数据是 $scope.cSessions = [ {"id":2,"session_name":"BD20","session_description":"","status":{"mystatus": ["INPROGRESS", "SUCCESS" ]};
    【解决方案2】:

    我们来了

    app.filter('successSessionFilter', function(){
      return function(items){           
        var filtered = items.filter(function(item){
          if(item['status'] && item['status'].indexOf('SUCCESS') != -1){
            return item;
          }
        })
        return filtered;
      }
    });
    

    演示https://jsfiddle.net/ogycjbkL/

    【讨论】:

    • 哇.. 这就是我需要做的。感谢您的回答。你的代码很重要!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-07
    • 1970-01-01
    • 1970-01-01
    • 2020-05-22
    • 2014-12-16
    相关资源
    最近更新 更多