スコープ変数、ng-repeat divタグ(基本的にテーブル)への配列をバインドします。 配列にデータを動的に追加すると機能します!行がテーブルに追加されます。Angular jsスコープ変数(配列)の変更がng-repeatに反映されない
しかし、配列から要素を削除すると、その変更はテーブルに反映されません。 1つの行を削除する必要があります。続き
は、私は(Javascriptを)で働いているコードです:
$scope.myfields = [];
$scope.addField = function() {
$scope.myfields.push({ "name": "", "type": "", "required": "", "enum": "" });
console.log("add: " + $scope.myfields.length);
console.log(JSON.stringify($scope.myfields));
}
$scope.removeField = function (index) {
$scope.myfields.splice(index, 1);
console.log("remove: " + $scope.myfields.length);
console.log(JSON.stringify($scope.myfields));
}
EJS:以下を参照してください!
奇妙なことは、 コンソールログでは、$ scope変数に期待通りに変更が加えられ、view(table)のみが更新されていないと表示されます。 もし私が "$ index by track"を置かないなら、テーブルに反映された両方の停止を追加して削除してください!
助けてください。ありがとう!
EDIT 2: あなたが求めているコード:
<div class="col-md-12">
<p style="text-align:center"><strong>DEFINE CUSTOM FIELDS:</strong></p>
<br>
<div style="text-align:center">
Click on '+' button to add custom field:
<div class="fa fa-plus-circle" ng-click='addField()'> </div>
<div class="fa fa-minus-circle" ng-click='removeField(0)'> </div>
</div>
<br>
<div data-responsive-table>
<table data-table>
<thead >
<tr >
<th data-event='sort'>
Field Name
</th>
<th data-event='sort'>
Type
</th>
<th data-event='sort'>
Is Required?
</th>
<th data-event='sort'>
Enumeration
</th>
</tr>
</thead>
<tbody >
<tr data-parent-row ng-repeat="um in dynamicFields track by $index">
<td>
<input placeholder="Name" ng-model="um.name" validation="required" >
</td>
<td>
<select style='height: 45px;' ng-model="um.type" >
<option value="string">string</option>
<option value="boolean">boolean</option>
<option value="integer">integer</option>
</select>
</td>
<td>
<select style='height: 45px;' ng-model="um.required" >
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td>
<input placeholder="Enum" ng-model="um.enum" validation="required" >
</td>
</tr>
</tbody>
</table>
</div>
</div>
に投稿してください。 micFields array – Karim
ng-clickでremoveField関数をどのようにトリガーしますか? –
コードは正常です。呼び出し元のremoveFieldのコードを表示します。 –