Question

我的表中有6个过滤器，根据每个过滤器选择我需要创建一个对象数组，该数组匹配给定的所有过滤条件。目前我尝试过这样的事情

$scope.exportConditonVariable ===undefined

单击“应用”按钮

 $scope.apply=function(){
  $scope.conditionObjectFraming(filtervalue1,tableobjname);
$scope.conditionObjectFraming(filtervalue2,tableobjname);
$scope.conditionObjectFraming(filtervalue3,tableobjname);
$scope.conditionObjectFraming(filtervalue4,tableobjname);
$scope.conditionObjectFraming(filtervalue5,tableobjname);
$scope.conditionObjectFraming(filtervalue6,tableobjname);
};

下面的函数将检查过滤器值是否未定义，并将它推入一个字符串。

  $scope.conditionObjectFraming=function(value,obj){
        if(value !=undefined){
          if($scope.exportConditonVariable ===undefined){
            $scope.exportConditonVariable="'"+value+"'===$scope.tableData[i]."+obj;
          }else{
            $scope.exportConditonVariable+=" && '"+value+"'===$scope.tableData[i]."+obj;
          }
        }
      }

我现在遇到的问题是当我遍历tableData数组时，如下所示

for(var i=0;i<$scope.tableData.length;i++){
        if($scope.exportConditonVariable){
          $scope.exportArray.push($scope.tableData[i]);
        } 
}

if条件总是为真，因为它将$ scope.exportConditonVariable视为一个字符串。如何实现上述目标。

Answer 1

如果我理解正确，你有一个包含6列的数据表，其中每列都有一个过滤器，允许你过滤表中所选值的行，同时允许多个过滤器。

这是我在这种情况下通常做的事情：

创建所有数据的数组
创建仅包含已过滤数据的第二个数组
创建一个在过滤器更改时调用的函数
在该函数中，使用与过滤器匹配的第一个数组的那些行填充第二个数组。然后，此过滤器可以像您想要的那样复杂。

我附上了一个片段来说明。我希望这能帮到你。

angular.module("app", [])
  .controller("myController", function() {
    var _this = this;
    _this.filter1 = undefined;
    _this.filter2 = undefined;
    _this.filter3 = undefined;

    _this.tableData = [{
      col1: 'some',
      col2: 'data',
      col3: 'here'
    }, {
      col1: 'some',
      col2: 'data',
      col3: 'there'
    }, {
      col1: 'some',
      col2: 'data',
      col3: 'where'
    }, {
      col1: 'no',
      col2: 'data',
      col3: 'here'
    }, {
      col1: 'no',
      col2: 'data',
      col3: 'there'
    }, {
      col1: 'no',
      col2: 'data',
      col3: 'where'
    }, {
      col1: 'much',
      col2: 'data',
      col3: 'here'
    }, {
      col1: 'much',
      col2: 'data',
      col3: 'there'
    }, {
      col1: 'much',
      col2: 'data',
      col3: 'where'
    }, {
      col1: 'some',
      col2: 'unicorns',
      col3: 'here'
    }, {
      col1: 'some',
      col2: 'unicorns',
      col3: 'there'
    }, {
      col1: 'some',
      col2: 'unicorns',
      col3: 'where'
    }, {
      col1: 'no',
      col2: 'unicorns',
      col3: 'here'
    }, {
      col1: 'no',
      col2: 'unicorns',
      col3: 'there'
    }, {
      col1: 'no',
      col2: 'unicorns',
      col3: 'where'
    }, {
      col1: 'much',
      col2: 'unicorns',
      col3: 'here'
    }, {
      col1: 'much',
      col2: 'unicorns',
      col3: 'there'
    }, {
      col1: 'much',
      col2: 'unicorns',
      col3: 'where'
    }, ];

    _this.filterChanged = function() {
       _this.filteredTableData = _this.tableData.filter(function(row) {
          if (_this.filter1 && (!row.col1 || row.col1.indexOf(_this.filter1) < 0)) return false;
          if (_this.filter2 && (!row.col2 || row.col2.indexOf(_this.filter2) < 0)) return false;
          if (_this.filter3 && (!row.col3 || row.col3.indexOf(_this.filter3) < 0)) return false;            
          return true;
       });       
    }
    _this.filterChanged();
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="myController as vm">

    Example with just 3 columns for brevity:

    <h3>Filters</h3>
    <div>filter col 1:
      <input ng-change="vm.filterChanged()" ng-model="vm.filter1">
    </div>
    <div>filter col 2:
      <input ng-change="vm.filterChanged()" ng-model="vm.filter2">
    </div>
    <div>filter col 3:
      <input ng-change="vm.filterChanged()" ng-model="vm.filter3">
    </div>

    <h3>Table data</h3>
    <table>
      <tr ng-repeat="row in vm.filteredTableData">
        <td ng-bind="row.col1"></td>
        <td ng-bind="row.col2"></td>
        <td ng-bind="row.col3"></td>
      </tr>
    </table>


  </div>
</div>

Javascript如何构建动态if条件

1 个答案: