在angularjs中过滤表格的列数据

Question

我是 angularjs 的新手，每天都在学习，但不知何故我无法弄清楚如何过滤这些数据以显示在表格中。

部分，失败和成功

我想显示在分隔符'|'之前有 1 的数据

Ex 在 Success 单元格中：1|12311 0|2122 显示结果 12311

原始表格

结果表

<table class="table table-condensed" border ="1" align="center">
<tr>
<th>Job Id</th>
<th>Job Type</th>
<th>Nb of Urls</th>
<th>Size of Page</th>
<th>Bytes</th>
<th>Site Id</th>
<th>Partial</th>
<th>Fail</th>
<th>Success</th>
</tr>
<tr ng-repeat="detailData in detailObject"> 
<td>
<span ng-bind="detailData.jobId"></span>
</td>
<td>
<span ng-bind="detailData.jobType"></span>
</td>
<td>
<span ng-bind="detailData.Date"></span>
</td>
<td>
<span ng-bind="detailData.countUrl"></span>
</td>
<td>
<span ng-bind="detailData.countBytes"></span>
</td>
<td>
<span ng-bind="detailData.sid"></span>
</td>
<td>
<span ng-bind="detailData.countPartial  | filter: scidStatusFilter"></span>
</td>
<td>
<span ng-bind="detailData.countFail"></span>
</td>
<td>
<span ng-bind="detailData.countSuccess"></span>
</td>
</tr>
</table>

// 输入 JSON

{
  "statusCode": 200,
  "message": "Getting Data",
  "data": [
    {
      "jobId": "2~27-4-2017~10:46:27",
      "sid": 1,
      "jobType": "mode",
      "date": "2017-04-14T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~11:2:58",
      "sid": 2,
      "jobType": "mode",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~11:7:57",
      "sid": 2,
      "jobType": "ondemand",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~12:19:16",
      "sid": 2,
      "jobType": "mode",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    }
  ]
}

Answer 1

您可以通过编写自定义函数为您测试值来做到这一点：

<table>
    ...
    <td>{{ successValue(detailData.countSuccess) }}</td>
/<table>

在你的范围内，定义successValue函数：

$scope.successValue = function(val) {
    if(val.substring(0,2) == '1|') return val.slice(9);
    else return val;
}

---

注 1：您可能可以通过测试正则表达式来改进 successValue()，但我不是一个好的正则表达式编写者。我只是试图在这个答案中解释 Angular 方法可以做什么。

注意 2：每次要显示来自控制器的值时，不必强制使用 ng-bind。您可以全部更改：

<td>
    <span ng-bind="detailData.jobId"></span>
</td>

收件人：

<td>{{detailData.jobId}}</td>

Answer 2

试试这行代码：

if(item.countSuccess.indexOf('1|') != '-1') {
  item.countSuccess = item.countSuccess.substring(item.countSuccess.indexOf('1|')+2, item.countSuccess.indexOf('0|')-1);
}

演示

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.detailObject = [
    {
      "jobId": "2~27-4-2017~10:46:27",
      "sid": 1,
      "jobType": "mode",
      "date": "2017-04-14T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~11:2:58",
      "sid": 2,
      "jobType": "mode",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~11:7:57",
      "sid": 2,
      "jobType": "ondemand",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    },
    {
      "jobId": "2~27-4-2017~12:19:16",
      "sid": 2,
      "jobType": "mode",
      "date": "2017-04-24T18:30:00.000Z",
      "countSuccess": "1|12311 0|2122",
      "countFail": "0|12311 0|2122",
      "countPartial": "1|2122 0|12311",
      "countUrl": 24,
      "countBytes": 246
    }
  ];
  
$scope.detailObject.map(function(item) {
   if(item.countSuccess.indexOf('1|') != '-1') {
     item.countSuccess = item.countSuccess.substring(item.countSuccess.indexOf('1|')+2, item.countSuccess.indexOf('0|')-1);
   }
});

console.log($scope.detailObject);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table class="table table-condensed" border ="1" align="center">
<tr>
<th>Job Id</th>
<th>Job Type</th>
<th>Nb of Urls</th>
<th>Size of Page</th>
<th>Bytes</th>
<th>Site Id</th>
<th>Partial</th>
<th>Fail</th>
<th>Success</th>
</tr>
<tr ng-repeat="detailData in detailObject"> 
<td>
<span ng-bind="detailData.jobId"></span>
</td>
<td>
<span ng-bind="detailData.jobType"></span>
</td>
<td>
<span ng-bind="detailData.Date"></span>
</td>
<td>
<span ng-bind="detailData.countUrl"></span>
</td>
<td>
<span ng-bind="detailData.countBytes"></span>
</td>
<td>
<span ng-bind="detailData.sid"></span>
</td>
<td>
<span ng-bind="detailData.countPartial  | filter: scidStatusFilter"></span>
</td>
<td>
<span ng-bind="detailData.countFail"></span>
</td>
<td>
<span ng-bind="detailData.countSuccess"></span>
</td>
</tr>
</table>
</div>

Answer 3

我遵循了这种方法，我希望我的答案是这样的。 //html端

<td>
  <span ng-bind=" successValue(detailData.countPartial) "></span> 
</td>

//js端

$scope.successValue = function(val) {
                var aOuterData = [];
                var aInnerData = [];
                var scidData = [];
                aOuterData = val.split(' ');
                angular.forEach(aOuterData,function(val){
                aInnerData = val.split('|');
                if(aInnerData[0]>0){
                scidData.push(aInnerData[1]);
                }
                })
                return scidData.join(',');
            }

Answer 4

如果你的第一个字符是动态值，你可以试试下面的函数，

模板：

<table>
    ...
    <td>{{ successValue(detailData.countSuccess) }}</td>
/<table>

控制器：

$scope.successValue = function(val) {
    return val.split('|')[0];
}

注意：我已采用“Mistalis”答案使其具有动态性。