View:
<div ng-app= "MyApp" ng-controller= "Myctrl" ><ul>
<li ng-repeat= "(k,v) in data" style= "{{$even? ' Color:red ': '} ' > <!--add style to an even line--{{ k}} Name: {{v.name}} URL: {{v.url}} </li>
<li ng-repeat= "(k,v) in Data" >
<span ng-if= "$first" style= "{{$first? ' Color:red ': '} ' >
{{V.name}} {{V.url}}
</span>< add red to the first element!--
<span ng-if= "$middle" style= "{{$middle? ' Color:blue ': '} ' ></span><!--middle element added blue---
{{V.name}} {{V.url}}
<span ng-if= "$last" style= "{{$last? ' Color:black ': '} ' ></span><!--last element added black--
{{V.name}} {{V.url}}
</li></ul></div>
Controller:
var app = Angular.module (' myApp ', []); App.controller (' Myctrl ', function ($scope) { $scope. data = [ {name: ' Chengdu people ', url: ' chengduren.com '}, {name: ' Chengdu net ', url: ' chengduwang.com '}, {name: ' Chengdu Cloud ', url: ' chengduyun.com '}, {name: ' hdphp ', url: ' hdphp.com '}, { Name: ' hdcms ', url: ' hdcms.com '}, ]; });
Angular study notes (3) Ng-repeat traverse JSON and give style