私は「AngularJS」と呼ばれるものの初心者なので、ある時点で立ち往生しました。
以下のコードサンプルを検討してください:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-bind="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
上記の例で、「ng-bind」を使用してアプリケーション変数「firstName」の値を HTML 入力テキスト コントロールにバインドできないのはなぜですか?
そして、私が以下のようにコードを書いたとします:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
上記の例では、「ng-model」を使用して、アプリケーション変数「firstName」の値を HTML 入力コントロールにバインドできます。
上記の 2 つのコードの違いをわかりやすい言葉で説明してもらえますか?
また、以下のコード スニペットも見てください。
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
</body>
</html>
上記 (3 番目) の例では、アプリケーション変数「firstName」の値を<p>
タグにバインドするにはどうすればよいでしょうか?
誰か説明してください。
ありがとう。