我正在使用angularjs，html来显示表格并显示表格中的记录。如果条件满足，我想迭代列值并删除列中的值。
演示:http://plnkr.co/edit/EtikF47DBvJ6bOIB8JSm?p=preview&preview
我想删除结果(列)已交付的表(AssociateNum 列)中的关联编号。 例如，对于关联编号 21,10,133，结果为已交付、已发货、已发货。 我想删除结果为已交付的关联编号 21(对于表中的所有行也是如此)。
html:
<table border="1">
<tr ng-repeat="player in players">
<td ng-cloak data-ng-class="player.standing && 'null' || 'strikethrough'">{{ player.name }}</td>
<td>
<a ng-repeat="associateNum in player.associatedNumber .split(',')" href="https://urladdr/associateid={{associateNum}}" target="_blank">
{{associateNum}}<span ng-if="$index+1 != player.associatedNumber.split(',').length">;</span></a>
</td>
<td>
{{ player.standing }}
</td>
</tr>
</table>
js代码:
app.controller('MainCtrl', function($scope) {
$scope.players = [{
"name": "Robert C",
"associatedNumber": "21,10,133",
"standing": true,
"result":"Delivered,shipped,shipped"
}, {
"name": "Joey C",
"associatedNumber": "55,2",
"standing": false,
"result":"To be delivered,Delivered"
}, {
"name": "Bobby A",
"associatedNumber": "15",
"standing": true,
"result":"TO be delivered"
}, {
"name": "John A",
"associatedNumber": "1,33,34",
"standing": true,
"result":"To be delivered,shipped"
}];
});
最佳答案
我将 associateNum 放在它自己的跨度元素中，当相应的 result 等于“Delivered”时，它会分配一个类
<span data-ng-class="player.result.split(',')[$index] === 'Delivered' ? 'strikethrough' : 'null'">{{associateNum}}</span>
虽然您可能想要删除为名称添加的删除线类；)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.players = [{
"name": "Robert C",
"associatedNumber": "21,10,133",
"standing": true,
"result":"Delivered,shipped,shipped"
}, {
"name": "Joey C",
"associatedNumber": "55,2",
"standing": false,
"result":"To be delivered,Delivered"
}, {
"name": "Bobby A",
"associatedNumber": "15",
"standing": true,
"result":"TO be delivered"
}, {
"name": "John A",
"associatedNumber": "1,33,34",
"standing": true,
"result":"To be delivered,shipped"
}];
});/* Put your css in here */
.strikethrough {
text-decoration: line-through;
}<!DOCTYPE html>
<html data-ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-require="angular.js@1.4.x"></script>
<script data-require="angular.js@1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table border="1">
<tr ng-repeat="player in players">
<td ng-cloak data-ng-class="player.standing && 'null' || 'strikethrough'">{{ player.name }}</td>
<td>
<a ng-repeat="associateNum in player.associatedNumber .split(',')" href="https://urladdr/associateid={{associateNum}}" target="_blank">
<span data-ng-class="player.result.split(',')[$index] === 'Delivered' ? 'strikethrough' : 'null'">{{associateNum}}</span><span ng-if="$index+1 != player.associatedNumber.split(',').length">;</span>
</a>
</td>
<td>
{{ player.standing }}
</td>
</tr>
</table>
</body>
</html>关于javascript - 循环和条件检查，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50105375/