带有AngularJS表达式的条件和循环？

Question

我有一组 JSON 数据，包含以下两个对象：

{  
   "date":"20160118",
   "entity":"01",
   "security":{  
      "securityID":"191457",
      "identifiers":[  
         {  
            "value":"345342532",
            "type":"fii"
     },
     {  
           "value":"32453452",
           "type":"isin"
     },
     {  
           "value":"48125D886",
           "type":"cusip"
     }
    ]
   }
}

还有：

   {
   "date":"342534543",
   "entity":"01",
   "security":{  
      "securityID":"3425435",
      "identifiers":[  
       {  
          "value":"32543543",
          "type":"fii"
       }
     ]
   }
  }

我正在创建一个只使用 AngularJS 表达式和 HTML 的表格。

我在访问security.identifiers[#].value 时遇到了麻烦。根据证券有多少identifiers - 它们可能位于不同的数组位置 - 这意味着“fii”可能最终与前一行的“cusip”在同一列中。在我的角度表达式中是否有一种方法可以搜索数组并找到一个字符串？在这种情况下，identifiers.type 将是了解它放置在哪一列中的关键。我尝试在我的 javascript 中循环并为我的表达式提供索引，但我似乎遇到了关闭问题 - 我很高兴有一个更简单的方法。

到目前为止，我的 identifiers 专栏有这个 - 我知道它们是错误的，但希望能让您了解我正在尝试做什么。

            <td>{{data.security.identifiers.type === "fii" ? data.security.identifiers.value : ""}}</td>
            <td>{{data.security.identifiers.type === "isin" ? data.security.identifiers.value : ""}}</td>
            <td>{{data.security.identifiers.type === "cusip" ? data.security.identifiers.value : ""}}</td>

Answer 1

我能理解你想要做什么，下面的代码可以像你期望的那样工作。

<td>{{data.security.identifiers.filter(function(v){return v.type == 'fii'})[0].value}}</td>

---

为了改进你可以创建一个函数来做过滤器（可能在控制器或服务中）：

$scope.identifierFilter = function(type) {
    var filtered = this.data.security.identifiers.filter(function(v) {
        return v.type == type;
    });
    return filtered && filtered[0] ? filtered[0].value : '';
};

在html中

<td>{{identifierFilter('fii')}}</td>

---

我在看你的例子，我认为上面的代码可以工作。但是如果你可以改变你的 JSON 结构，它会更好更容易。

"identifiers":{
    fii  : 'dfdfdf',
    isin : '32453452',
    cusip: '48125D886'
}

html可以简单的喜欢

<td>{{data.security.identifiers.fii}}</td>

如果你想做这个转换，我可以给你进一步的答案。

可以帮忙

---

我更新了您的示例，对于上述代码的一些语法错误，我们深表歉意。

请查看：https://plnkr.co/edit/NgvJKrfOGmKHfOap08xU?p=preview

---

这是模板使用前的重构数据。如果数据结构可以改变，选择你喜欢的更好。

https://plnkr.co/edit/7eHAvSaBcOiTajOomNEs?p=preview

Answer 2

您最好的选择可能是使用指令，或者根据您的要求进行过滤。指令将使您的标记清晰，您将封装您需要的功能。例如。

<table border="1" style="width:100%">
  <tr>
    <th>Entity</th>
    <th>SecurityID</th>
    <th>Security1</th>
    <th>Security2</th>
    <th>Security3</th>
    <th>date</th>
  </tr>
  <tr ng-repeat="data in JSONData">
    <td>{{data.entity}}</td>
    <td>{{data.security.securityID}}</td>
    <td><identifier identifiers="data.security.identifiers" render-type="fii"></identifier></td>
    <td><identifier identifiers="data.security.identifiers" render-type="isin"></identifier></td>
    <td><identifier identifiers="data.security.identifiers" render-type="cusip"></identifier></td>
    <td>{{data.date}}</td>
  </tr>
</table>

笨蛋： https://plnkr.co/edit/6VJuQob1jfDzsR8XPKKM?p=preview

希望这会有所帮助。