Learning Angular

Ng Repeat

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<div ng-app='myApp' ng-controller='myController'>
    <ul>
        <li ng-class="{'firstElement':$index===0,'lastElement':$index===items.length-1}" ng-click="itemClicked($event, item, $index)" ng-repeat="item in items"> {{item.label}} {{item.data}} {{$index}}</li>
    <ul>
    <button ng-click="btnClickHandler()">Change Data</button>
</div>

CSS

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

.firstElement{
    color:red;
}

.lastElement{
    color:green;
}

.enabled{
    cursor:pointer;
}

.disabled{
    opacity: 0.4;
    cursor:default;
}

JavaScript

var app = angular.module('myApp',[]);
app.controller('myController', function($scope){
$scope.items = [{label:'item1',data:'data1'},{label:'item2',data:'data2'},{label:'item3',data:'data3'}]    
$scope.btnClickHandler = function(){
}

$scope.itemClicked = function(event, item, index){
    console.log(event);
    alert(index + " clicked");
}
});