Only One Item Selected – single select between multiple checkbox ul-li

Rate this post

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

[php]

Angularjs – Detect user selection for li | AngularJS Active Menu

Please Click any Li….


  • {{filter.url}}


[/php]

index.js

[php]
var liveapp = angular.module(‘liveapp’, []);

READ :  How to check request is ajax or not in Laravel 6?

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;
};
});
[/php]

style.css

[php]
.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;
}
}
[/php]

READ :  PHP Print number Pattern Program with Example

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

Example

Angular js add class to active HTML element Example

View

[php]

  • {{ datalist.name }}

[/php]

Controller

[php]
//angularjs function
$scope.select= function(item) {
$scope.selected = item;
};
//angularjs function
$scope.isActive = function(item) {
return $scope.selected === item;
};

[/php]

Example

Leave a Reply

Your email address will not be published.