AnglarJS簡単なデーターバインディング

5385 ワード

JavaScript アングラーJS

上に書いてあるコードを調べてみます.私たちはng-modelコマンドを使って内部データモデルのオブジェクト($scope)のnameを作ります.

             。
                     ,          。

データモデルのオブジェクトは$scopeオブジェクトです.scopeオブジェクトは簡単なJavaScriptオブジェクトであり、ここでの属性はビューでアクセスでき、コントローラと対話することもできます.この概念を理解しなくても大丈夫です.後の例はこの概念を詳しく説明します.双方向データバインディング(bi−direction)は、ビューがある値を変えると、データモデルが汚い検査によってこの変化を観測し、データモデルがある値を変えると、ビューも変化に応じて再レンダリングすることを意味する.
入力フィールドでは、以下のように、ng−model命令を使用してデータバインディングを実現します.
＜input ng-model=“person.name”type=“text”plceholder=“Yourname”

<h1>Hello{{ person.name }}</h1>

1
2
3
4
5
6
7
このようにバインディングしてセットします.ビューがどのようにデータモデルを更新するかを観察できます.入力フィールドの値が変化すると、person.nameが更新されます.ビューはこの更新を反映します.
私たちはビューだけで双方向データバインディングを実現した.他の角度(バックエンドからフロントエンドまで)から双方向データバインディングを説明するために、コントローラを深く紹介します.
その中に含まれているすべての要素がAnglarJSアプリケーションに属するというng-controller宣言のように、DOM要素上のすべての要素はいずれかのコントローラに属しています.

        ,                :

<div ng-controller='MyController'>
  <input ng-model="person.name" type="text" placeholder="Your name">
  <h1>Hello {{ person.name }}</h1>

＜／div＞この例では、1秒ごとに1歩進むクロックを作成し(クロックは通常このようなものです)、clockを更新します.
変数上のデータ:
function MyController($scope、$timeout)｛var udateClock=function()｛8

    $scope.clock = new Date();
    $timeout(function() {

  updateClock();
}, 1000);

9);10

};
updateClock();

この例では、MyController関数は、2つのパラメータ、すなわち、DOM要素の$scopeと$timeoutを受け取ります.13章では、異なる変数定義関数の使い方を紹介します.
11この例では、タイマーがトリガされると、udateClock関数を呼び出し、$scope.clockの値を12時に設定します.
前の時間.$timeoutオブジェクト13
clock変数は、$scopeのclockの値を表示するために、ビューで{}包まれてもよい.

<div ng-controller="MyController">
  <h5>{{ clock }}</h5>

以下は完全な例示コードです.

<!doctype html>
<html ng-app>

＜head＞＜script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">

  </head>
  <body>

    <div ng-controller="MyController">
      <h1>Hello {{ clock }}!</h1>

1415161718

  </div>
         <script type="text/javascript">
         function MyController($scope, $timeout) {

             var updateClock = function() {
               $scope.clock = new Date();
               $timeout(function() {

                 updateClock();
               }, 1000);

｝

             updateClock();
           };

         </script>
       </body>

上のコードを変更できます.

     <!doctype html>

     <html ng-app>
       <head>

＜script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"

       <body>
         <div ng-controller="MyController">

           <h1>Hello {{ clock }}!</h1>
         </div>

＜script type=「text/javascript」src=「js/ap.js」

前の例のJavaScriptコードをjs/ap.jsファイルに置いて、直接HTMLに書くのではありません.
//app.jsでfunction MyController($scope,timeout)｛

       var updateClock = function() {
         $scope.clock = new Date();
         $timeout(function() {

           updateClock();
         }, 1000);

｝

       updateClock();
     };

js配列のいくつかの騒乱動作