angular入門 ng-model #Angular

ng-model

inputで受けた値をすぐ画面に反映させる。リアクティブなんちゃらってやつ？よくわかんないけど。

html

<html ng-app="myApp">
  <body>

    <h4>ng-modelでデータバインド</h4>
    入力：{{test}}<br>
    <div><input ng-model="test"></div>

    <h4>js側で指定したデータバインド</h4>
    <div ng-controller="myCtrl">
      入力：{{test}}<br>
      <input type="textarea" ng-model="test">
    </div>

  </body>
</html>

javascript

myApp = angular.module("myApp",[]);

myApp.controller("myCtrl", function($scope){
  $scope.test = "HOGE!";
});

触ってみるよろし

<input>などの入力可能な要素にng-modelを指定すると、入力値を変数に格納してくれる。そして{{変数}}とすると表示してくれる。そんな感じ。

ng-controllerを経由すると初期値を設定できる。

あと注目すべきは変数のスコープ。ng-controllerを指定すると、その配下がスコープになる。同じ変数名での範囲外の変数への影響はない。
ng-controllerなしの場合はmyApp全体がスコープになる。

間違ってたらごめんちゃい。