How to loop output from AngularJS data source

This time I will bring you AngularJSHow to loop the output of the data source, what are the precautions for the AngularJS data source to loop the output, the following is a practical case, let's take a look.

Loop output of data source in AngularJS

I have just come into contact with the angular front-endframework recently, but after using it for a few days, I feel that the effect is more obvious, especially in terms of data output effect, which is more efficient than the native jsprogramming Much higher, so this is why many companies require front-end development that you need to be familiar with using front-end frameworks, which can improve the efficiency of the project faster. What I want to talk about today is the loop output of data sources when using the angular front-end framework.

​​​​ Loop the data in the array to the page. If you use the js method, you need to for loopoutput the array, and when outputting, it is to the DOM in the page The nodes in the layer are operated, and if you use the front-end framework (angular), it has already encapsulated the instructions for data loop output, that is, ng-repeat.

<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>

This is to loop out the data in the array book. The instructions packaged in the framework are all unique and marked with ng- in front of them, just like when using the instructions in WeChat development, there are wx- in front of them. To label and illustrate the same effect.

                      But if your interface involves switching tabs, the interface may appear like the left side is the category and the right side is the data corresponding to the specific category, that is, your data may be similar to

$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}]}]

                                                                             How to display the specific data corresponding to the military on the interface, or to display the specific data corresponding to emotions on the interface, in fact, it is to classify and output the data according to the classification of the data

<ul>
  <li ng-repeat=" item in book track by $index">
    <ul>
      <li ng-class="&#39;color2&#39;" ng-repeat=" items in item.value|page:nowpage:3">
        {{items.name}}
        <span class="price">价格：{{items.price|currency:'￥'}}</span>
        <button ng-click="add($index)">添加至购物车</button>
      </li>
    </ul>
  </li>
</ul>

The effect of this output is to classify the data according to the classification in the data, that is, a two-layer nested loop. The data in the second layer of loop is the result after the first loop, so that one category of data can be Output to the ul under li, and then loop the specific data in the category to output

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

JS implements a simple 24-hour clock

Promise implements asynchronous implementation

The above is the detailed content of How to loop output from AngularJS data source. For more information, please follow other related articles on the PHP Chinese website!