学習のための重要なポイント
•コマンドを使用する理由
•カスタムディレクティブを作成します
•JQLiteを使用します
1.なぜカスタムコマンドを使用するのか
NGには多くのカスタムディレクティブが組み込まれていますが、それらはあなたの要件を満たしていない場合があり、カスタムプロパティを作成する必要があります。
2。カスタムコマンド
次に、小さなケースをしましょう。マウスがクリックして価格を上げると、リスト項目が自動的に増加します。もちろん、リストも手順を通じて自動的に追加されます。それは空のdivです
<！doctype> <！ - モジュールを使用 - > <html ng-app = "exampleapp"> <head> <title> angluar test </title> <meta charset = "utf-8"/> <link rel = "styleSheet" type = "text/css" href = "css/boottrap.min.cs"> < type = "text/css" href = "css/bootstrap-theeme.min.css"> </head> <body> <dlv ng-controller = "defaultctrl"> <div> <h3> products </h3> </div> <div> <！ - 価格を上げるためにクリックして<ボタン= "増加</button> </div> <div> <！ - 順序付けられていないリストに製品データを表示 - > <！ - list-property = "price | currency" item "item units locized-> <div unorderlist =" un-orderlist = "currency | currency"> </div> </div> </div> </dlv> <script = "/javascript" "" src = "js/angular.min.js"> </script> <script> <text/javascript "> angular.module（" exampleapp "、[]）。 attrs [un -orderlist ']は、製品モデルの値を取得しますElement.Append（UL）; // <li>タグ要素li = angular.element（ "<li>"）; scope。$ watch（watcherfn、function（newvalue、oldvalue）{// li li.text（newValue）;}）（}）（i）}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} {app.products "" "" "" "" "" "" ""価格：1.20、有効期限：10}、{name： "Bananas"、category： "Fruic"、Price：2.42、expiry：7}、{name： "pears"、 "fruic"、frice：2.02、expiry：6}]; i ++）{$ scope.products [i] .price ++;分析：
ステップ1：コントローラーを作成し、データモデル製品とIncrementPrics（）メソッドを追加します
ステップ2：UNORDERLISTタグをカスタマイズします。このタグの関数は、スコープデータモデルを介して、その値を順序のないリストに表示することです。
パート3：マークアップボタンをクリックすると、順序付けられていないリストの値が順番に増加します
3。JQLiteで作業します
ngにはjqliteが組み込まれています。これはjqueryの小さなバージョンです
<！doctype> <！ - モジュールを使用 - > <html ng-app = "exampleapp"> <head> <title> angluar test </title> <meta charset = "utf-8"/> <link rel = "styleSheet" type = "text/css" href = "css/boottrap.min.cs"> < type = "text/css" href = "css/bootstrap-theeme.min.css"> </head> <body> <dlv> <！ - custom Directive-> <ol domestive-directiont> <li> apples </li> <ul> <li> bananas </li> </li> </li> </li> <li> oranges </li> </ol> </dlv> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> angular.module.module（ "exampleapp"、] .directive（astelectient（scope、 "、untiont"、untiont（） "、untiont（）"、untiont "、untiont"、untiont "、untiont"、untiont（）要素の下で、ここでは、要素は発信者<ol> var項目= elemint.find（ "li"）; （Items.eq（i）== "oranges"）{items.eq（ "color"、 "red"）; items.css（ "color"））;分析：
ステップ1：コントローラーをカスタマイズし、データモデル名を定義します
ステップ2：コマンドをカスタマイズする関数は、コマンドで使用される要素の下ですべてのLIを見つけ、異なる値のフォントに異なる値を割り当てることです。
ステップ3：ビューで指示を呼び出して使用します
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。