Question

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

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

Answer 1

我已将associateNum放入其自己的span-element中，当相应的result等于＆＃34;已交付＆＃34; ＃34;

<span data-ng-class="player.result.split(',')[$index] === 'Delivered' ? 'strikethrough' : 'null'">{{associateNum}}</span>

您可能想要删除为名称添加的删除线类;）

＆＃13;

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

＆＃13;

/* Put your css in here */

.strikethrough {
  text-decoration: line-through;
}

＆＃13;

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

＆＃13;

Answer 2

我认为您希望将ng-class与条件语句和必需的CSS结合使用：

ng-class="{strike: player.result.indexOf('Delivered') > -1}"

示例：

<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-class="{strike: player.result.indexOf('Delivered') > -1}"
                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>

CSS：

.strike { text-decoration: line-through; }

循环和条件检查

2 个答案: