Question

我使用angularjs，html显示表格中的信息。我想要查看表格第二列中显示的ID，其状态为＆＃34;已交付＆＃34;在$ scope.items的productstatus中给出。

演示：http://plnkr.co/edit/m0x5TQNY4QprCF5CqRSn?p=preview&preview

我尝试如下，但无法显示第1行和第11行中的productID＆lt; 10,12，第3行中的100AX：

  <a ng-repeat="pid in item.productid.split(',')" href="https://urladdr/associateid={{associateNum}}" target="_blank">
            <span data-ng-class="item.productstatus.split(',')[$index] === 'delivered' ? 'strikethrough' : 'null'">{{pid}}
            </span><span ng-if="$index+1 != item.productid.split(',').length">;</span>
    </a>

json对象：

$scope.items = [{
  "name":"John",
  "product":"Laptop",
  "productid":"10,11X,12",
  "standing": true,
  "productstatus":{"10":"delivered","11x":"Shipped","12":"delivered"} 
},{
   "name":"Rob",
  "product":"Mobile",
  "productid":"13PX",
  "standing": true,
  "productstatus":{"13PX":"Shipped"}
},{
"name":"Dan",
  "product":"Laptop",
  "productid":"",
  "standing": true,
  "productstatus":null
},{
"name":"Robert",
  "product":"Laptop",
  "productid":"11A,100AX",
  "standing": true,
  "productstatus":{"11A":"delivered","100AX":"delivered"}
  }]

Answer 1

您正在尝试拆分您无法执行的json对象。如果将productstatus更改为字符串，则可以保持代码不变。否则，您将要使用键/值对进行ng-repeat。（即ng-repeat="(key, prop) in item.productstatus"或直接使用密钥，即data-ng-class="item.productstatus[pid] === 'delivered' ? 'strikethrough' : 'null'"

如果您想要复制和替换代码，以下内容适用于我：

<a ng-repeat="pid in item.productid.split(',')" href="https://urladdr/associateid={{associateNum}}" target="_blank">
       <span data-ng-class="item.productstatus[pid.trim()] === 'delivered' ? 'strikethrough' : 'null'">{{pid}}
       </span><span ng-if="$index+1 != item.productid.split(',').length">;</span>
</a>

已更新：根据评论添加了trim()。

Answer 2

请注意item.productstatus的数据结构是Object而不是Array。

因此，您应该将使用情况更改为：item.productstatus[pid]。

http://plnkr.co/edit/s7ySyexnVrhzSXkY

Pro TIP ：使用ng-class指令的map to boolean选项，它更清晰。

ng-class="{className: item.productstatus[pid] === 'delivered'}"

评估结果可以是一个字符串，表示空格分隔的类名，数组或类名到布尔值的映射。对于地图，其值为真值的属性的名称将作为css类添加到元素中。

根据条件迭代和删除

2 个答案: