AngularJS データソースからの出力をループする方法

今回はAngularJSデータソースを周期的に出力する方法と、AngularJSデータソースを周期的に出力するための注意事項についてお届けします。以下は実際的なケースです。

AngularJSのデータソースのループ出力

最近、Angular フロントエンド フレームワーク に触れたばかりですが、数日間使用した後、効果がより明らかで、特にデータ出力効果の点で、以前のフレームワークよりもはるかに効率的であると感じました。ネイティブ JS プログラミング を使用しているため、多くの企業では、フロントエンド開発では、プロジェクトの効率をより迅速に向上させることができるフロントエンド フレームワークの使用に精通している必要があります。今日話したいのは、Angular フロントエンド フレームワークを使用する場合のデータ ソースのループ出力です。

​​​​ 配列内のデータをページにループさせるには、配列に対してforループ出力を行う必要があり、出力時にページ内のDOM層のノードを操作します。フロントエンド フレームワーク (angular) を使用する場合、データ ループ出力、つまり ng-repeat の命令がすでにカプセル化されています。

りー

以下は、配列ブック内のデータのループ出力です。フレームワークにカプセル化された命令はすべて一意であり、WeChat 開発で命令を使用する場合と同様に、命令の前に wx- が付いています。 . 同じ効果をラベル付けして説明するため。

ただし、インターフェースにタブバーの切り替えが含まれる場合、インターフェースは左側がカテゴリ、右側が特定のカテゴリに対応するデータのように表示される場合があります。つまり、データは

<ul>
  <li ng-class="idx==$index?&#39;color1&#39;:&#39;color2&#39;" ng-repeat=" item in book track by $index">{{item.name}}{{$index}}</li>
</ul>

に似ている可能性があります。 軍事に対応する特定のデータをインターフェースに表示する方法、または感情に対応する特定のデータをインターフェースに表示する方法は、実際にはデータの分類に従ってデータを分類して出力することです

$scope.book=[{idx:7,name:"军事",value:[{name:'美国的城市政治',price:37},{name:'兵法简述',price:45},{name:'国防论',price:14},{name:'总体战',price:13},{name:'海军战略论',price:11}]},
{idx:8,name:"情感",value:[{name:'三体',price:12}]}]

この出力の効果は、データ内の分類に従ってデータを分類することです。つまり、2 番目のループのデータは最初のループの後の結果となり、データの 1 つのカテゴリを分類できます。 li の下の ul に出力し、カテゴリ内の特定のデータをループします。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

js は単純な 24 時間時計を実装します

Promise は非同期を実装します

以上がAngularJS データソースからの出力をループする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。