AngularJSで双方向データバインディング｜ng-modelとng-clickの実践的な使い方

2019年1月31日2025年5月8日

AngularJSを使ったデータバインディングとイベント処理の基本を、実際のコード例とともに解説します。ng-modelとng-clickを組み合わせた動的な画面制御方法を学びましょう。

基本的なアプリケーションの設定

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController as ctrl">
    <!-- コンテンツ -->
</body>
</html>

ng-modelの基本的な使い方

// コントローラの定義
angular.module('myApp', [])
.controller('MainController', function($scope) {
    // モデルの初期化
    $scope.user = {
        name: '太郎',
        age: 25,
        isActive: true
    };
});

<!-- テキスト入力 -->
<input type="text" ng-model="user.name">
<p>名前: {{user.name}}</p>

<!-- チェックボックス -->
<label>
    <input type="checkbox" ng-model="user.isActive">
    有効状態: {{user.isActive ? 'ON' : 'OFF'}}
</label>

ng-clickを使ったインタラクティブな処理

// コントローラにメソッド追加
$scope.incrementAge = function() {
    $scope.user.age++;
    console.log('現在の年齢:', $scope.user.age);
};

<button ng-click="incrementAge()">年齢を増加</button>
<p>年齢: {{user.age}}</p>

動的なリスト表示（ng-repeat）

$scope.products = [
    { id: 1, name: '商品A', price: 1000 },
    { id: 2, name: '商品B', price: 2000 },
    { id: 3, name: '商品C', price: 3000 }
];

<ul>
    <li ng-repeat="product in products">
        {{product.name}} - {{product.price | currency:"¥"}}
    </li>
</ul>

条件付き表示（ng-show/ng-hide）

<div ng-show="user.age >= 20">
    <p>成人向けコンテンツを表示</p>
</div>

<div ng-hide="user.isActive">
    <p>アカウントが無効です</p>
</div>

ベストプラクティス

コントローラAs構文の使用推奨
モデルオブジェクトの初期化を忘れずに
$scopeの代わりにcontrollerAs構文を使用
フィルターを活用したデータ整形

// controllerAs構文の例
.controller('MainController', function() {
    var vm = this;
    vm.user = { name: '花子' };
});

よくあるエラーと対処法

ng-modelのスコープ問題: 適切なドット記法を使用
コントローラの依存関係注入: 配列構文または$injectを使用
非同期処理: $applyや$timeoutを適切に使用

まとめ

ディレクティブ	用途	使用例
ng-model	双方向データバインディング	<input ng-model=”value”>
ng-click	クリックイベント処理	<button ng-click=”func()”>
ng-show	条件付き表示	<div ng-show=”condition”>