Source Code

Detect Item selection for ul li Based

AngularJS: Display one specific object in an array at a time

using In this Example,ng-repeat single item,ng-bind,angular ng-repeat filter,ng-class

Angularjs - Detect user selection for li | AngularJS Active Menu

Please Click any Li....

  • {{filter.url}}

Example : index.html


<body>
<div  class="Websites_ct" ng-controller="liveCtrl">
	<h2>Angularjs - Detect user selection for li | AngularJS Active Menu	</h2>
	<h3><span class="blink">Please Click any Li....</span></h3>
    <ul>
        <li ng-repeat="filter in Websites" ng-click="select($index)" ng-class="{sel: $index == selected}">
            <span class="Websites_ct_status"></span>
            {{filter.url}}
        </li>
    </ul>
</div>
</body>

Example : App.js


var liveapp = angular.module('liveapp', []); 

liveapp.controller('liveCtrl', function($scope) {

    $scope.Websites = [
            {
                'WebsiteId': 1,
                'url': 'live24u',
            },
            {
                'WebsiteId': 2,
                'url': 'all',
            },
            {
                'WebsiteId': 3,
                'url': 'http://live24u.com/status/',
            },
            {
                'WebsiteId': 4,
                'url': 'http://live24u.com/tutorial',
            },
            {
                'WebsiteId': 5,
                'url': 'AngularJS - ng-repeat show one item at a time',
            },
            {
                'WebsiteId': 6,
                'url': 'AngularJS: Display one specific object in an array at a time',
            },
            {
                'WebsiteId': 7,
                'url': 'Show & Hide Div by Changing Class to Active - AngularJS',
            }
        ];
    $scope.selected = 0;

    $scope.select= function(index) {
       $scope.selected = index; 
    };
});

Example : Style.css


.sel {
    color:red
}
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
  color:green;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}