HTML5テクニカルノート

AngularJS入門 07: 項目を調べて削除する

ID: FN1601008
Technique: HTML5 / JavaScript
Library: AngularJS 1.5.3

AngularJSのコントローラで管理している項目のデータを調べて、条件にしたがって削除してみます。要素のマウスクリックでコードを実行するディレクティブも、併せてご紹介しましょう。

01 項目合計とチェックされていない項目数が表示されるフォーム

本稿で手を加えるのは、「AngularJS入門 06: 項目を数えて表示する」でコントローラが管理する項目の数を調べるサンプルとして書いたコード001です。項目の追加やチェックボックスのオン・オフによって、数の表示が変わります(図001)。また、データバインディングにより、チェックボックスをチェックしたテキストには取り消し線が引かれます。

図001■項目合計とチェックされていない項目数を調べて表示する

02 チェックされた項目を削除するメソッドの定義

チェックされた項目は削除するメソッド(archive())を、コントローラに加えます。つぎのJavaScriptコードのように配列(todos)のエレメントに納められた項目をangular.forEach()関数で順に調べ、チェックボックスがチェックされていない項目だけをエレメントとした新たな配列で上書きします(angular.forEach()関数については「AngularJS入門 06: 項目を数えて表示する」03「チェックのついていない残り項目数を調べて表示に加える」参照)。


myApp.controller('TodoListController', function() {
	var todoList = this;
	var todos = [
		{text: 'AngularJSを学ぶ', done: true},
		{text: 'AngularJSでアプリケーションをつくる', done: false}
	];
	todoList.todos = todos;

	todoList.archive = function() {
		todos = [];
		angular.forEach(todoList.todos, function(todo) {
			if (!todo.done) {
				todos.push(todo);
			}
		});
		todoList.todos = todos;
	}
});

03 チェックのついた項目を要素のクリックで削除する

<body>要素にはつぎのように<a>要素を加え、クリックしたら項目削除の新しいメソッド(remaining())を呼び出します。要素のクリックでコードを実行するのが、ng-clickディレクティブです。つぎのように、実行したいコードを文字列で値として定めます。<a>要素をクリックすると、チェックボックスにチェックされた項目は除かれます(図002)。件数も動的に改められます。


<div ng-controller="TodoListController as todoList">
	<span>全{{todoList.todos.length}}件中残り{{todoList.remaining()}}件</span>
	[ <a href="" ng-click="todoList.archive()">断捨離</a> ]

</div>

図002■チェックをつけた項目は削除される

なお、この機会に項目のチェックがしやすいように、項目のinputとspan要素をlabel要素に含めました。こうすると、項目のテキストをクリックしても、チェックボックスが切り替わります。


<label>
	<input type="checkbox" ng-model="todo.done">
	<span class="done-{{todo.done}}">{{todo.text}}</span>
</label>

HTMLドキュメントの<script>要素と<body>要素の中身は、以下のコード001にまとめました。ここで、angular.module()関数の戻り値を変数に入れるのはやめました。つぎのように、「.」(ドット)を続けてcontroller()メソッドが呼び出せるからです。こうすると、グローバル変数が残るのを避けられます。また、サンプル001としてファイルをフレームに掲げます。


// var myApp = angular.module('todoApp', []);
angular.module('todoApp', [])
// myApp.controller('TodoListController', function() {
.controller('TodoListController', function() {

});

コード001■チェックのついた項目数を削除する


<html ng-app="todoApp">


angular.module('todoApp', [])
.controller('TodoListController', function() {
	var todoList = this;
	var todos = [
		{text: 'AngularJSを学ぶ', done: true},
		{text: 'AngularJSでアプリケーションをつくる', done: false}
	];
	todoList.todos = todos;
	todoList.addTodo = function() {
		var newTodo = todoList.todoText;
		if (newTodo) {
			todoList.todos.push({text: newTodo, done: false});
			todoList.todoText = '';
		}
	}
	todoList.remaining = function() {
		var count = 0;
		angular.forEach(todos, function(todo) {
			if (!todo.done) {
				count++;
			}
		});
		return count;
	}
	todoList.archive = function() {
		todos = [];
		angular.forEach(todoList.todos, function(todo) {
			if (!todo.done) {
				todos.push(todo);
			}
		});
		todoList.todos = todos;
	}
});


<div class="container">
	<h2>Todo</h2>
	<div ng-controller="TodoListController as todoList">
		<span>全{{todoList.todos.length}}件中残り{{todoList.remaining()}}件</span>
		[ <a href="" ng-click="todoList.archive()">断捨離</a> ]
		<ul class="list-unstyled">
			<li ng-repeat="todo in todoList.todos">
				<label>
					<input type="checkbox" ng-model="todo.done">
					<span class="done-{{todo.done}}">{{todo.text}}</span>
				</label>
			</li>
		</ul>
		<form ng-submit="todoList.addTodo()">
			<input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here">
			<input class="btn btn-primary btn-sm" type="submit" value="追加">
		</form>
	</div>
</div>

サンプル001■チェックのついた項目数を削除する

作成者: 野中文雄
更新日: 2016年3月31日 AngularJS 1.5.3のリリースにともない、本文とコードを更新。
作成日: 2016年2月5日