0

私は「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>タグにバインドするにはどうすればよいでしょうか?

誰か説明してください。

ありがとう。

4

1 に答える 1