2016-08-29 9 views
0

AngularJS(v1.4.8)を使用して単一の表のセルに表示するコンマ区切りの文字列を作成しようとしていますが、オブジェクトの配列同様の質問が尋ねられているので、すべてのところにありますが、今のところ私を右手に向ける人はいません。 オブジェクトプロパティからコンマで区切られた配列値をコンマで区切ったリストを作成するためのng-repeat

次のようなオブジェクトの単純な配列を考える:

$scope.activities = [ 
    { 
    name: "leela", 
    entries: [{note: 'Lala-A', isInterested: true }, 
       {note: 'Lala-B', isInterested: false}, 
       {note: 'Lala-C', isInterested: true }] 
    }, 
    { 
    name: "slurms", 
    entries: [{note: 'Blah-A', isInterested: false}, 
       {note: 'Blah-B', isInterested: true}, 
       {note: 'Blah-C', isInterested: true}] 
    }]; 

各オブジェクトは、 isInterestedブール値を持つオブジェクトの配列であるエントリと呼ばれる性質を有しています。ノートプロパティのカンマ区切りリストを作成したいと思いますが、isInterested = trueのエントリプロパティの値についてのみ、;私は次のように表示したい上記のデータに基づいて、例えば

、:正しく性質をフィルタリングしている、

--------------------------- 
|NAME |ENTRIES   | 
=========================== 
|leela |Lala-A, Lala-C | 
--------------------------- 
|slurms |Blah-B, Blah-C | 
--------------------------- 

私はこれまでのところ得ているが、同じライン上に配置することは問題です。

<!-- this displays the 'note' on multiple lines --> 
<div ng-repeat="activity in activities"> 
    <div ng-repeat="entry in activity.entries | filter:{isInterested: 'true'}"> 
    <span>{{entry.note}}</span> 
    </div> 
</div> 

<!-- this displays nothing/zilch --> 
<div ng-repeat="activity in activities"> 
    <div ng-repeat="entry in activity.entries | filter:{isInterested: 'true'}"> 
    <span>{{entry.note + ($last ? '' : ', ')}}</span> 
    </div> 
</div> 

ご協力いただければ幸いです。

答えて

3

divはデフォルトでdisplay:block;であり、可能な限り多くのスペースを占有するため、メモは複数の行に表示されます。あなたは、エントリのdivの表示を変更することでこの問題を解決することができます。また、ちょうどそのようなスパンにdivを変えることができる:

<div ng-repeat="activity in activities"> 
    <span ng-repeat="entry in activity.entries | filter:{isInterested: 'true'}"> 
    {{entry.note + ($last ? '' : ', ')}} 
    </span> 
</div> 

spanのデフォルトの表示がinlineあるので、これは動作します。使用例:https://jsbin.com/jivoqeqade/edit?html,css,js,output

+0

ありがとう! + 50dkpです。 – BgRva

関連する問題