AngularJS構文の詳しい説明(続き)_AngularJS

src 属性と href 属性

Angularjs では、src は ng-src として記述し、href は ng-href として記述する必要があります。例:

コードをコピーします コードは次のとおりです:

テキスト

式

テンプレートでは、単純な数学演算、比較演算、ブール演算、ビット単位の演算、参照配列、オブジェクト表記などを実行できます。ただし、式はカスタム インタプリタを使用して実行されます。 Angular の) を使用する代わりに Javascript の eval() 関数を使用するため、より大きな制限があります。
ここでの式は多くの点で Javascript よりも厳密ですが、エラーが発生した場合、テンプレートは NullPointerException エラーをスローするのではなく、単純に何も表示しません。 例:

コードをコピーします コードは次のとおりです:

{{computer() /10 }}

//これは合法ですが、このアプローチは避けるべきです。

UI とコントローラーの責任を分離します

コントローラーは特定の DOM フラグメントにバインドされており、これらのフラグメントはコントローラーが管理する必要があるコンテンツです。コントローラーを DOM ノードに関連付けるには、主に 2 つの方法があります。1 つは、ng-controller を介してテンプレート内で宣言する方法です。2 つ目は、ルーティングを介して動的にロードされる DOM テンプレート フラグメントにコントローラーをバインドする方法です。 ネストされたコントローラーを作成でき、継承構造を通じてデータ モデルと関数を共有できます。実際のネストは、内部のプリミティブ継承メカニズムを通じて、親コントローラー オブジェクトの $scope が内部のネストされた $ に渡されます。スコープ (関数を含むすべてのプロパティ)。例:

コードをコピーします コードは次のとおりです:

...

$scope を使用してモデル データを公開します

$scope プロパティを明示的に作成できます (例: $scope.count = 5)。テンプレート自体を介して間接的にデータ モデルを作成することもできます。

表現による。たとえば

コードをコピーします コードは次のとおりです:

カウントを 3 に設定

フォーム項目で ng-model を使用する

式と同様に、ng-model で指定されたモデル パラメーターは外部コントローラーでも機能します。唯一の違いは、フォーム項目と指定されたモデルの間に双方向のバインディングが作成されることです。

ウォッチを使用してデータ モデルの変更を監視します

$watch の関数シグネチャは次のとおりです: $watch(watchFn,watchAction,deepWatch)
watchFn は、監視対象のデータ モデルの現在の値を返す Angular 式または関数を含む文字列です。 watchAction は、watchFn が変更されたときに呼び出される関数または式です。その関数シグネチャは次のとおりです:
function(newValue,oldValue,scope) deepWatch true に設定すると、このオプションのブール型パラメーターは、監視対象オブジェクトの各プロパティが変更されたかどうかを確認するように Angular に指示します。単一の値を監視するのではなく、配列内の要素、またはオブジェクトのすべてのプロパティを監視する場合は、このパラメーターを使用できます。 Angular は配列またはオブジェクトを走査する必要があるので、コレクションが大きい場合、操作が複雑で重くなることに注意してください。

$watch 関数は関数を返します。変更通知を受け取る必要がない場合は、この返された関数を使用してモニターからログアウトできます。
プロパティを監視して監視からログアウトする必要がある場合は、次のコードを使用できます: var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

コード例は次のとおりです:

コードをコピー コードは次のとおりです:

   
   
        function CartController($scope) {
            $scope.bill = {};
            $scope.items = [
                {タイトル:「ペイントポット」、数量:8、価格:3.95}、
                {タイトル:「水玉模様」、数量:17、価格:12.95}、
                {タイトル:「小石」、数量:5、価格:6.95}
            ];
            $scope.totalCart = function() {
                var total = 0;
                for (var i=0,len=$scope.items.length;i                     total = 合計 $scope.items[i].price * $scope.items[i].quantity;
                }
                合計を返します;
            }
            $scope.subtotal = function() {
                return $scope.totalCart() - $scope.bill.discount;
            }
            function CalculateDiscount(newValue,oldValue,scope) {
                $scope.bill.discount = newValue > 100? 10:0;
            }//ここのwatchAction関数数
            $scope.$watch($scope.totalCart,calculateDiscount);//ここのwatch関数数
        }
   


   

       

            {{item.title}}
           
            {{商品.価格 |通貨}}
            {{商品.価格 * 商品.数量 |通貨}}
       

       

合計: {{totalCart()|通貨 }}

       

割引: {{bill.discount |通貨}}

       

小計: {{小計() |通貨}}