Only One Item Selected – single select between multiple checkbox ul-li
AngularJS: Simple Display one specific object in an array at a time.
Here I am going to simple explain Example how to add and remove active class on angularjs dynamically added ul and li based content or link li while on clicking using angular.Only One Item Selected – single select between multiple checkbox ul-li
select one item in one time in angularjs Example
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>
index.js
var liveapp = angular.module('liveapp', []);
liveapp.controller('liveCtrl', function($scope) {
$scope.Websites = [
{
'WebsiteId': 1,
'url': 'live24u',
},
{
'WebsiteId': 2,
'url': 'all',
},
{
'WebsiteId': 3,
'url': 'https://infinityknow.com',
},
{
'WebsiteId': 4,
'url': 'https://infinityknow.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;
};
});
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;
}
}
Click on any li link, add to active class will be simple added to the class add li active element. Creating An Simple HTML-Based UL-LI Based Menu In AngularJS Using ngModel directive And ngModel simple Controller
Angular js add class to active HTML element Example
View
<ul>
<li ng-repeat="datalist in datalists" ng-click="select(datalist)"
ng-class="{active: isActive(datalist)}" >
<div>{{ datalist.name }}</div>
</li>
</ul>
Controller
//angularjs function
$scope.select= function(item) {
$scope.selected = item;
};
//angularjs function
$scope.isActive = function(item) {
return $scope.selected === item;
};
