フィルタリングされた配列からプロパティを引き出す

Question

私はcomp_groupプロパティの結果を評価して特定のオブジェクトをフィルタリングして取り出す配列（下記参照）を持っています。

ので、ビュー内：

<p>Standings array for this team: {{getStandings | filter: {team_id: "1"} }}</p> 

そしてgetStandings配列は次のようになります。

  [ 
      { 
       "comp_group":"Group A", 
       "team_id":"1", 
       "team":"A", 
       "overall_w":"0", 
       "overall_l":"0", 
      }, 
      { 
       "comp_group":"Group A", 
       "team_id":"2", 
       "team":"B", 
       "overall_w":"0", 
       "overall_l":"0", 
      }, 
      { 
       "comp_group":"Group B", 
       "team_id":"3", 
       "team":"C, 
       "overall_w":"0", 
       "overall_l":"0", 
      }, 
      { 
       "comp_group":"Group B", 
       "team_id":"4", 
       "team":"D, 
       "overall_w":"0", 
       "overall_l":"0", 
      } 
     ] 

これが正常にteam_id: 1の配列（1から最初のオブジェクトを引っ張ります）。

しかし、にオブジェクトの個々のプロパティにアクセスする方法はわかりません。

マイ（不十分）溶液：

結果は、単一のオブジェクトを含む配列であるので、私の現在のソリューションは、各要素に対してフィルタをNGリピートを行い、その後、そこからプロパティを引くことですしかし、それは非常に反復的であり、明らかに最良の解決策ではない。

は次のようになります。

<table> 
    <col width="210px"> 
    <col width=""> 
    <tr ng-repeat="teamstat in getStandings | filter: {team_id: whichMyteam} "> 
     <td><p>Games Played:</p></td> 
     <td><p>{{teamstat.overall_gp}}</p></td> 
    </tr> 
    <tr ng-repeat="teamstat in getStandings | filter: {team_id: whichMyteam} "> 
     <td><p>Wins:</p></td> 
     <td><p>{{teamstat.overall_w}}</p></td> 
    </tr> 
    <tr ng-repeat="teamstat in getStandings | filter: {team_id: whichMyteam} "> 
     <td><p>Draws:</p></td> 
     <td><p>{{teamstat.overall_d}}</p></td> 
    </tr> 
</table> 

このついて行くにはよりエレガントな方法はありますか？

Answer 1

あなたは確信している場合は、フィルタリングによって最大1つのオブジェクトを取得しますのtbodyタグに

<table> 
    <col width="210px"> 
    <col width=""> 
    <tbody ng-repeat="teamstat in getStandings | filter: {team_id: whichMyteam} "> 
     <tr> 
      <td><p>Games Played:</p></td> 
      <td><p>{{teamstat.overall_gp}}</p></td> 
     </tr> 
     <tr> 
      <td><p>Wins:</p></td> 
      <td><p>{{teamstat.overall_w}}</p></td> 
     </tr> 
     <tr> 
      <td><p>Draws:</p></td> 
      <td><p>{{teamstat.overall_d}}</p></td> 
     </tr> 
    </tbody> 
</table> 

Answer 2

をごNGリピートを置くことができる唯一のNG-繰り返しで、あなたは割り当てることができ、このために行いますフィルタリングされたオブジェクトを変数に追加します。

テンプレートのある場所（変数から印刷する前）でng-initを使用して、フィルタされたオブジェクトで変数を初期化することができます。

<p ng-init='teamstat = (getStandings | filter: {team_id: "1"})'>Standings array for this team: {{getStandings}}</p> 

しかし、このようなテンプレートで初期化すると、コードを読むことができず、維持が困難になります。したがって、上記の解決策の代わりに、コントローラーのフィルターを使用し、そこで変数を初期化してください。

コントローラー：

$scope.teamstat = $filter('filter')($scope.getStandings, {team_id: "1"})[0]; 

コントローラ内で$フィルターを注入することを忘れないでください。

次に、ビューでteamstatを表示します。

<table> 
    <col width="210px"> 
    <col width=""> 

    <tr> 
     <td><p>Games Played:</p></td> 
     <td><p>{{teamstat.overall_gp}}</p></td> 
    </tr> 
    <tr> 
     <td><p>Wins:</p></td> 
     <td><p>{{teamstat.overall_w}}</p></td> 
    </tr> 
    <tr> 
     <td><p>Draws:</p></td> 
     <td><p>{{teamstat.overall_d}}</p></td> 
    </tr> 
</table>