Angularjsはじめに
AngularJSはJavaScriptフレームワークです。 <script>タグを介してHTMLページに追加できます。
AngularJSは、ディレクティブを介してHTMLを拡張し、表現を介してデータをHTMLにバインドします。
AngularJSはJavaScriptフレームワークです
AngularJSはJavaScriptフレームワークです。 JavaScriptに書かれたライブラリです。
AngularJSはJavaScriptファイルとして公開されており、スクリプトタグを使用してWebページに追加できます。
<スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.4.6/Angular.min.js"> </script>
この記事では、AngularJSページのフィルタリングタグ関数の導入に関するものです。キーコンテンツの次の紹介をご覧ください。
ページHTML：
<div> <div> news category </div> <button ng-click = "clean（）"> clear </button> </div> <ion-content scroll = "false"> <ul> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li ng-repeat = "regionsname in costeer.regions" ng-click = "onclick（regionsname.name、negionsname.checked）"> <入力タイプ= "チェックボックス" value = "regionsname.name.name" ng-checked = "regionsname.checked"/> <span> {{regionsname.cn}} </span> </li> </ul> </li> <li> <p>首都：</p> <ul> <ul> <li ng-repeat = " ng-click = "onclick（capitalsname.name、capitalsname.checked）"> <入力タイプ= "チェックボックス"値= "capitalsname.name.name" ng-checked = "capitalsname.checked"/> <span> {{capitalsname.cn}} </span> </li> </ul> </li> <li> <p> domain：</p> <ul> <li ng-repeat = "scopesname in category.scopes" ng-click = "onclick（scopesname.name、scopesname.checked）"> <入力タイプ= "チェックボックス" value = "scopesname.name.name.name." scopesname.checked "/> <span {{scopesname.cn}}} </li> </li> </情報：</p> <ul> <li ng-repeat = "category.economicdata" ng-click = "onclick（encolutedata.name、encolutivedata.checked）"> <input Type = "Checkbox" value = "EconomicData.Name" ng-checked = "EconomicData.checked"/> <span> {{encolutedata.cn}} </span> </li> </ul> </li> <li> <p>中央銀行データ：</p> <ul> ng-click = "onclick（centralbank.name、centralbank.checked）"> <入力型= "cultronbank.name" ng-checked = "centralbank.checked"/> <span> {{centralbank.cn}}}} </span </li> </ul> </li> </ul> < ng-click = "infosref（）">確認</button>ページビルディング：
合計5つの主要なアイテムに分割され、各主要アイテムの下の小さな分類タグはNG-Repeatによって生成されます。
要件分析：ユーザーは各フィルタータグをクリックし、選択したタグ名を配列に追加し、バックグラウンドプログラマーがフィルタリングするためのアレイを背景に送信します。
JSコード：
//ニュースフィルターデータ分類（シミュレーション$ scope.category = {regions：[{name： "regions_china"、cn： "china"、checked：false}、{name： "regions_unitedstates"、cn： "us"、checked：fa lse}、{name： "regions_unitedkingdom"、cn： "uk"、checked：false}、{name： "regions_eurozone"、cn： "europe"、checked：false}、{name： "regions_ja PAN "、cn：" Japan "、Checked：false}、{name：" Regions_canada "、cn：" canada "、checked：false}、{name：" regions_australia "、cn：" australia "、checked：false}、{name：" regio ns_switzerland "、cn：" switzerland "、cn：" switzerland "、checked：false}、{name：" regions_others "、cn：" others "、checked：false}]、capitals：[{name：" capitals_foreigne xChange "、cn：" forex "、checked：false}、{name：" capitals_stocks "、cn：" treasury "、checked：false}、{name：" capitals_commodities "、cn：" commodities "、checked ：false}、{name： "capitals_bondsbonds"、cn： "brand"、checked：false}]、scopes：[{name： "scopes_macroscopic"、cn： "onall"、checked：false}、{name： "scopes_in Dustrial "、CN：" Industrial "、Checked：false}、{name：" scopes_company "、cn：" company "、checked：false}]、[name：" Economicdata_yes "、cn："経済データ、チェック：false}]、Centralbank：[{centranbank_yes "データ」、チェック：false}]} samename = category [k] [j]; samename.checked = true; return samename}}}}; //この方法は、主に最初にアイテムの配列を受信し、最初にアレイとシミュレートされたデータを通過して選択した状態として選択されたラベルをチェックします。 for（var i = 0; i <item.length; i ++）{var samename = hardlist（item [i]）; //メソッド全体が2回実行されるため、理由はまだ見つかりません。 if（$ scope.categories.indexof（samename.name）<0）{$ scope.categories.push（samename.name）;}}}; init（）; //分類アレイをフィルタリングします（ユーザーがタグをクリックした後、タグ名が渡された後、選択した状態であるかどうか。選択して、配列に追加します。 i = 0; i <$ scope.categories.length; i ++）{if（$ scope.categories [i] === filteritem）{$ scope.categories.splice（i、1）;}}}}; //確認ボタン$ scope.infosref =（）=> {$ scope.oncategorychange（）; $ scope.modal.hide（）;}; // clear $ scope.clean =（）=> {let che = $（ "input：checked"）; $ scope.categories.length = 0; che.each（function（k、filterinput）{filterinput.checked = false;}）; $ scope.infosref（）;}}}上記は、編集者が紹介したAngularJSページフィルタリングタグの小さな関数です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！