fineder, LLC.

to derive fine.

[AngularJS]ng-repeat使用時にはJSON形式で値をセットしよう。


AngularJSには配列を繰り返して、リスト表示させる「ng-repeat」というdirectiveが用意されています。

APIディファレンスはこちら。
http://docs.angularjs.org/api/ng.directive:ngRepeat

ただ、ちょっとだけ使用するときにはRepeatに配列を渡す時に、形式はJSON形式で渡してあげた方がよさそうです。
(たぶんXMLもOKのはず。)

下の例をどうぞ。

<html>
<head>

</head>
<body ng-app>
    <h1>■ただの配列</h1>
    <section ng-init="friends = ['John','Tom']">

    <div ng-repeat="friend in friends ">
        <span >{{friend}}</span>
        <input ng-model="friend">
    </div>

    </section>

    <h1>■JSON形式</h1>
    <section ng-init="friends2 = [{name:'John'},{name:'Tom'}]">

    <div ng-repeat="friend in friends2 ">
        <span >{{friend.name}}</span>
        <input ng-model="friend.name">
    </div>

    </section>
   
    </body>
</html>

動作サンプルはこちら。

普通の配列形式とJSON形式でng-repeatを使用したとき、どちらも繰り返しはしてくれるのですが、普通の配列の場合inputのng-modelがモデルとして認識されません。
へー。

実際のアプリで使用するときには、ここの配列はPHPやその他のAPIなどからJSONで値を引っ張ってくる形になると思うので、あまり気にしなくてもいいかなと思いますが、「簡単に配列で渡しちゃえー」という時には注意が必要そうです。
繰り返し表示するだけとか、ドロップダウンリストに値を入れるだけとかなら問題ないかと思います。

それではー今日はこんな感じでー。

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