[解決済み] ng-clickを使用して配列から項目またはオブジェクトを削除するにはどうすればよいですか?
2022-04-02 20:43:50
質問
ボタンがクリックされたときにアイテムを削除できる関数を書こうとしているのですが、関数が混乱しているようです。
$digest
?
HTML & app.jsです。
<ul ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<a class="btn" ng-click="remove()">Delete</a>
</form>
</li>
</ul>
$scope.remove = function(){
$scope.newBirthday = $scope.$digest();
};
解決方法は?
アイテムを削除するには、配列からアイテムを削除する必要があります。
bday
アイテムをマークアップのremove関数に渡します。そして、コントローラでitemのインデックスを検索し、配列から削除します。
<a class="btn" ng-click="remove(item)">Delete</a>
次にコントローラで。
$scope.remove = function(item) {
var index = $scope.bdays.indexOf(item);
$scope.bdays.splice(index, 1);
}
Angularは自動的に
bdays
配列の更新を行い
ng-repeat
DEMO http://plnkr.co/edit/ZdShIA?p=preview
EDIT: サーバーでライブアップデートを行う場合、以下の方法で作成したサービスを使用します。
$resource
サーバーの更新と同時にアレイの更新を管理します。
関連
-
[解決済み】ラジオボタンの代わりに画像を使用する
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] IFrameからボーダーを取り除く
-
[解決済み] :last-child が期待通りに動作しない?
-
[解決済み] Railsです。railsアプリで<img src= >をimage_tagに変換する方法
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLの#記号の文字実体は?
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] HTML5 Validation Error: body start tag が見えたが、同じタイプの要素がすでに開かれていた
-
[解決済み] SRCとHREFの違い
-
[解決済み] 必要なキーに一致するルートがありません。[:id]
-
[解決済み] HTMLファイルへのリンクは可能ですか?
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] 電話番号のマークアップはどのように行うのですか?
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?
-
[解決済み] divが重ならないようにするには?