私はangularJSを使用しています。私のページには1つのテーブルがあります。入力フィールドを持つ行を追加するボタンを1つ作成しました。私のソリューションは、行とフォームの入力フィールドの値を追加するために良い仕事が、私は特定の行を削除する必要がある場所ではうまくいきません。私はフォーム用に1つの関数を使用し、行を追加および削除するために1つの関数を使用します。AngularJSテーブルの行を追加
それはこのようなものだ:
<div ng-init="tmplCtr.newPeople()">
<div class="col-lg-12">
<input name="postsubmit" class="btn btn-default btn-sm" type="submit" value="Save table" ng-click="tmplCtr.newTable(tmplCtr.table)" />
<button class="btn btn-default btn-sm" ng-click="tmplCtr.editRow()">Add row</button>
</div>
<form name="peopleForm" novalidate>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="place-name">Name</th>
<th class="place-value">Lastname</th>
<th class="place-options">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="people in tmplCtr.peoples">
<td class="place-name"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].name"></td>
<td class="place-last"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].lastname"></td>
<td class="place-options"><button class="btn btn-danger btn-md btn-delete" ng-click="tmplCtr.editRow($index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</form>
私はボタンが行を追加押すと、私は行を取得するが、私は、削除行を押したときに、私は配列ではなく、インデックスによって画面が、最後の行から行を削除します。その行の値もフォームスコープから削除されません。機能は:
function editRow(item) {
if(item == undefined) {
vm.peoples.push({});
} else {
vm.peoples.splice(item,1);
}
}
誰でも手伝ってもらえますか?
あなたはNG-モデル= "tmplCtr.table.values [$インデックス] .nameの" 代わりに使用NG-モデルを使用すべきではありません= "place.name"と他のフィールドと同様に 削除ボタンをクリックすると、場所オブジェクトを送信できます。 NGクリック=「tmplCtr.editRow(場所)」 インサイドeditRowあなたは配列内の場所を探し、それを –
を削除することができます。しかし、それは大丈夫です追加して、私はtmplCtr.peoples.values配列からオブジェクトを削除する必要があります。私は関数の編集行で良いインデックスを送信しますが、vm.peoples.splice(item、1);何とか良い仕事をしないでください – Sasa
プランナーを作ることができましたか? – Korte