学習のための重要なポイント
•コマンドを使用する理由
•カスタムディレクティブを作成します
•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をもっとサポートすることを願っています。