AngularJSで連動するSELECTタグを作る

連動するSELECTタグ

2015/02/12追記

hrfmmymtさんがfilter使ったより良い方法を記事にしてくれました。
hrfmmymtさんのやり方の方が良いので合わせて読んで下さい。
追記ここまで。

作るもの

今回はCakePHPはお休みして、主にAngularJSメインで試してみます。
作るものは一つ目SELECTタグを選択したら、その内容に応じて二つ目のSELECTタグのOPTIONが変化するサンプルです。

そしてサンプルです

jsFiddleにサンプル作ったので、こちらを確認して下さい。
まずhtmlの中身の解説をすると、

<h1>AngularJSの練習</h1>
 <div ng-app>  <-ここでアプリの宣言
    <div ng-controller="mainCtrl">
    <form novalidate name="myForm" >
    <p>Group:
    <select ng-model="group"  <-設定されるモデルは”group"
             ng-options="g.name for g in groups"  <-optionをgroupsモデルからループ処理で作成。
             ng-change="change()">  <-内容に変更があったらchange()メソッドを実行
        <option value="">-- chose group --</option>  <-一番上に来る空のオプションを設定
    </select>
    </p>
    <p>User:
    <select ng-model="user"  <-設定されるモデルは”user"
           ng-options="u.name for u in listUsers"> <-optionをlistUsersモデルからループ処理で作成。
        <option value="">-- chose user --</option> <-一番上に来る空のオプションを設定
    </select>
    </p>
    </form>
    <pre>グループ名 : {{group.name}}</pre>  <-グループ名の表示
    <pre>ユーザー名 : {{user.name}}</pre>  <-ユーザー名の表示
     </div>
</div>

といった内容になってます。
続いてJS側は

    //以下はそれぞれモデルでデータを格納してます。
    $scope.groups
    $scope.group 
    $scope.users 
    $scope.listUsers
    $scope.user
    //以下はメソッドで、一つ目のセレクトタグに変更があった場合に実行されます。
    $scope.change = function(){
        $scope.listUsers = [];
        for(var i=0;i<$scope.users.length;i++){
            //選択されたグループのidと一致しているユーザーを配列に追加していく
            if($scope.users[i].group_id ==$scope.group.id){
                 $scope.listUsers.push($scope.users[i]);  
            }
        }
    };

といった感じです。最初change()メソッドではなく、html側で

<select ng-model="user" ng-options="u.name for u in listUsers | filtter:ホニャララ">

みたいな感じで作れると思ったのですが、どうにもこうにも上手くいきませんでした。もし「出来るよ〜」って方がいらしゃったら是非ご指導下さいm(__)m。
ともかく、jQueryと比べてコードは少ないし、見やすいしで良かった良かった。ではでは。