Loop output of data sources in AngularJS
I have just come into contact with the angular front-end framework recently, but after using it for a few days, I feel that the effect is quite obvious, especially in terms of data output effect, which is much more efficient than native js. So this is why many companies require front-end development to require you to be familiar with using front-end frameworks, which can improve project efficiency faster. What I want to talk about today is the loop output of the data source 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 loop the array for loop output, and when output, you operate on the nodes in the DOM layer in the page. If you use the front-end framework (angular), it has encapsulated the instruction for data loop output, that is, ng-repeat.
<ul>
<li ng-class="idx==$index?'color1':'color2'" ng-repeat=" item in book track by $index">{{}}{{$index}}</li>
</ul>
This is to cyclically output the data in the array book. The instructions encapsulated in the framework are all uniquely marked with ng-, just like when using the instructions in WeChat development, there is a wx- in front of it to indicate the description.
But if your interface involves switching the tab column, the interface may appear when the data corresponding to the specific type on the left is the type on the right is the data corresponding to the specific type, that is, your data may be similar to
$=[{idx:7,name:"military",value:[{name:'U.S. Urban Politics',price:37},{name:'A brief description of the art of war',price:45},{name:'National Defense Theory',price:14},{name:'Total War',price:13},{name:'Naval Strategy Theory',price:11}]},
{idx:8,name:"emotion",value:[{name:'Three-body',price:12}]}]
How to display the specific data corresponding to military on the interface, or display the specific data corresponding to emotions on the interface, it is actually to classify and output data according to the classification of the data.
<ul>
<li ng-repeat=" item in book track by $index">
<ul>
<li ng-class="'color2'" ng-repeat=" items in |page:nowpage:3">
{{}}
<span class="price">price：{{|currency:'￥'}}</span>
<button ng-click="add($index)">Add to cart</button>
</li>
</ul>
</li>
</ul>
The effect of outputting this way is to classify and output the data according to the classification in the data, that is, a two-layer nested loop, and the data in the second layer loop is the result after the first loop. In this way, one category of data can be output into the ul below li, and the specific data in the category can be output cyclically
If you have any questions, please leave a message or go to the community of this site to exchange and discuss. Thank you for reading. I hope it can help you. Thank you for your support for this site!