Angular.jsで複数から選択するボタンを作る

Angular.jsで複数から選択するボタンを作って、classの有無でスタイルを変更してみます。

サンプルコード

まずは複数選択できるボタンを作ってみます。

HTML

<div ng-controller="button_ctrl">
	<div class="button-wrapper">
		<div class="button-item" ng-repeat="button in buttonData" ng-class="{selected: button.select}" ng-click="buttonClick($index)">{{button.text}}</div>
	</div>
</div>

JavaScript

angular.module('app', []).controller('button_ctrl', function($scope) {
	// ボタンで使用するデータ
	$scope.buttonData = [
		{
			"text": "幸平創真", // ボタンに表示するテキスト
			"select": false // ボタンが選択中かどうか判別する
		}, {
			"text": "薙切えりな",
			"select": false
		}, {
			"text": "田所恵",
			"select": false
		}, {
			"text": "薙切アリス",
			"select": false
		}, {
			"text": "黒木場リョウ",
			"select": false
		}, {
			"text": "新戸緋沙子",
			"select": false
		}
	];
	// ボタンクリック時の処理
	$scope.buttonClick = function(index) {
		if($scope.buttonData[index]['select']) {
			// 選択したボタンがtrueの場合はfalseにする
			$scope.buttonData[index]['select'] = false;
		} else {
			// 選択したボタンがfalseの場合はtrueにする
			$scope.buttonData[index]['select'] = true;
		}
	}
});

選択中のボタンのclassにselectedが追加されるようにしています。
複数選択ボタンのデモページ
　

サンプルコード2

先ほどのJavaScriptを少し修正して、複数から1つだけ選択できるボタンを作ってみます。

JavaScript

angular.module('app', []).controller('button_ctrl', function($scope) {
	// ボタンで使用するデータ
	$scope.buttonData = [
		{
			"text": "幸平創真", // ボタンに表示するテキスト
			"select": false // ボタンが選択中かどうか判別する
		}, {
			"text": "薙切えりな",
			"select": false
		}, {
			"text": "田所恵",
			"select": false
		}, {
			"text": "薙切アリス",
			"select": false
		}, {
			"text": "黒木場リョウ",
			"select": false
		}, {
			"text": "新戸緋沙子",
			"select": false
		}
	];
	// ボタンクリック時の処理
	$scope.buttonClick = function(index) {
		// 一旦全てのボタンをfalseにする
		for (var i = 0; i < $scope.buttonData.length; i++) {
			$scope.buttonData[i]['select'] = false;
		}
		// 選択したボタンをtrueにする
		$scope.buttonData[index]['select'] = true;
	}
});

単一選択ボタンのデモページ