Question

我是angularjs的新手并且日复一日地学习但不知何故我无法过滤掉这些数据以显示在表格中。

部分失败与成功

我想显示在分隔符'|'

之前有1的数据

Ex in 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

我遵循这种方法，我想要这样的回答。 // html side

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

// js side

$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 3

尝试以下代码：

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

<强>样本

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

Answer 4

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

模板：

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

控制器：

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

注意：我采取了“Mistalis”的答案让它变得动态。

以angularjs过滤表格的列数据

4 个答案: