fineder, LLC.

to derive fine.

[AngularJS]ng-repeat内の特定のデータだけclassを変更する方法。


こんにちは。
今日はAngularJSのng-repeat内で特定のデータだけのclassを変更する方法についてです。
いろいろと応用が効きそうなので覚えておいた方がいいやり方だと思います。

動作サンプルはこちら。

■HTML

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script>
        function MyCtrl($scope) {
            $scope.test="test string"
 
            $scope.isMe = function(friend){
                if(friend.me==true){
           return "bgMe";            
                }
            }
        };
                           
    </script>
 
    </head>
    <body ng-app>
        <section id="sampleScope" ng-controller="MyCtrl">       
  <section ng-init="friends = [{name:'Mary',me:false},{name:'John',me:true},{name:'Tom',me:false}]">
 
      <ul>
        <li ng-repeat="friend in friends " ng-class="isMe(friend)">
            {{friend.name}}
        </li>
      </ul>
            </section>
    </body>
</html>

■CSS

.bgMe{
    background:blue;
    color:#fff;
}

JSONデータをDBから取得してng-repeatで繰り返しています。
「ng-init」でJSONの初期値を設定していますが、ここは実際の開発ではDBから読み込んだデータになると思います。

ポイントはここ

ng-class="isMe(friend)"

ng-repeatを設定したliで、javascriptに設定したisMeという関数を呼んでいます。
引数にはng-repeat内のfriendsの1データfriendで、こうすることで一行ずつ処理をすることができます。

で、isMeではfriend.meの値がtrueの場合、「bgMe(文字列)」を返すようになっていて、レンダリング時にはfriend.me=trueの行だけが「class=”bgMe”」とすることができます。

このやり方はng-repeat内だけでなくとも使えます。
たとえばログインしたユーザのロールによって背景を変えるなど、何かの値を元に、classを入れ替えたい!という時使えると思います。

それではー。

fine:derの購読はFacebookページが便利です。