AngularJSでng-repeatした要素ごとに独立した処理を実行させる

AngularJSを初めてまだ2日目ですが、なんとなくメモしておきます。

わかってる人にとっては当たり前のことなんだと思います。

成果物

実装後の挙動

サンプルは以下に実装してあります。触りながら理解したい人はどうぞ。

背景

ng-repeatしてフォームを複数作ったあと、ng-keyupとかでフォーム毎に処理を行いたい場合に、すべてのフォームが同期されてしまって、それを直すのに苦労しました。

結果的にはng-*=""の中で連想配列が使えることがわかり解決。

自分の要件的には複数のフォーム毎に独立してAPI経由の非同期なインクリメンタルサーチができるところまで実装しました。需要があれば書きますが今回は省略。

実装

定義してあるformsの分だけリピートさせフォームを作りたい。

<div ng-controller="myController">
    <div ng-repeat="f in forms">
        {{f}} 
        <input ng-model="data[f]" ng-keyup="doChange(f)">
        {{dataTimes[f]}}
    </div>
</div>

ng-modelのdata[f]のfには、hoge, fuga, piyoがkeyとして入ってきます。
これはjs内では$scope.data[f]で参照できます。これで独立した挙動を実現できます。

変数の定義と、フォームでの記述をkeyとして関数を実行。
今回は単にフォームの内容を3倍するだけの処理としました。

var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope) {
    $scope.forms = {
        0: "hoge",
        1: "fuga",
        2: "piyo"
    };
    $scope.data      = {};
    $scope.dataTimes = {};
    $scope.doChange = function(f){
        console.log($scope.data);
        $scope.dataTimes[f] = $scope.data[f] * 3;
    };
}]);

参考

ここにたくさん動かせるサンプルがあって便利です。
もっと最初に出会っていれば…。