gpt4 book ai didi

javascript - 循环和条件检查

转载 作者:行者123 更新时间:2023-11-28 00:46:40 25 4
gpt4 key购买 nike

我正在使用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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com