テーブル内の選択された行の下に行を追加します

Question

私は自分のアイテムのリストを持つテーブルを持っています。各行には独自のボタン「詳細を表示」があります。そのボタンをクリックすると、選択した行の下の新しい行をテーブルに追加します。

$scope.contacts = [ 
{first_name: 'John', last_name: 'Smith', gender: 'm', phone: '(123)456 779'}, 
{first_name: 'Bar', last_name: 'Baker', gender: 'm', phone: '(123)456 779'}, 
{first_name: 'Foo', last_name: 'Tailor', gender: 'm', phone: '(123)456 779'}]; 

はその後、私のテンプレートビューで私の詳細行が

<tr> 
    <td colspan="3"> 
    <div> 
     First name: {{selected_contact.first_name}}<br> 
     Last name: {{selected_contact.last_name}}<br> 
     Gender: {{selected_contact.gender}}<br> 
     Phone: {{selected_contact.phone}}<br> 
    </div> 
    </td> 
</tr> 

がでていることを検討する必要がある。この

<table> 
    <thead> 
    <td>Actions</td> 
    <td>First Name</td> 
    <td>Last Name</td> 
    </thead> 
    <tbody> 
    <tr ng-repeat="c in contacts"> 
    <td><button ng-click="showDetails(c)"</td> 
    <td>{{c.first_name}}</td> 
    <td>{{c.last_name}}</td> 
    </tr> 
    </tbody> 
</table> 

次のようになります。 は、私はこのデータを持っている私のコントローラで言うことができますng-repeat-start/ng-repeat-endディレクティブを使用すると、ng-repeatからそれぞれ1つ後に行を追加したくないので、あまりにも多くのウォッチャーが必要になります。

+------------+-------------+-------------+ 
|show_details|c1.first_name|c1.last_name | 
+------------+-------------+-------------+ 
|selected_contact.first_name    | 
|selected_contact.last_name    | 
|selected_contact.gender     | 
|selected_contact.phone     | 
+------------+---------------------------+ 
|show_details|c2.first_name|c2.last_name | 
+------------+-------------+-------------+ 

この図では、c1が選択され、その詳細が示されています。

Answer 1

HTMLが表示されていないか、テーブルの作成方法やデータソースが表示されていなくても、一般的な回答以上のものを提供することはできません。 ng-repeatを使用してテーブルをレンダリングし、データソースがコントローラ内の配列であると仮定すると、array.splice（）を使用して配列内の適切なポイントに行を挿入し、データを取り込みます。 HTMLコードにはおそらく2つのタグセットが含まれています.1つは現在表示しているものを処理し、もう1つは詳細を表示するために使用します。 ng-show、ng-hideまたはng-ifのいずれかまたはすべてを使用して、含まれているデータのタイプに基づいて適切なものを表示します。