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

我正在创建一个 table，仅使用 AngularJS 表达式和 HTML。

我在访问 security.identifiers[#].value 时遇到了麻烦运行。取决于证券有多少 identifiers - 它们可能位于不同的数组位置 - 这意味着 "fii" 最终可能与前一行的 "cusip" 在同一列中。在我的 angular 表达式中有没有一种方法可以搜索数组并找到一个字符串？在这种情况下，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>

我在看你的例子，我认为上面的代码会 work.But 如果你能改变你的 JSON 结构，它会更好更容易。

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

html可以简单点赞

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

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

有帮助

我更新了你的例子，抱歉上面代码的一些语法错误。

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

这是模板前的重构数据use.It如果数据结构可以改变就更好了，选择哪个。

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

希望对您有所帮助。

AngularJS 表达式中的条件和循环？

Conditions and loops withing AngularJS expressions?

html

javascript

conditional

html-table

angularjs