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

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

READ :  Angularjs Reload data - update value without page refresh using Angularjs

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’, []);

liveapp.controller(‘liveCtrl’, function($scope) {

$scope.Websites = [
{
‘WebsiteId’: 1,
‘url’: ‘live24u’,
},
{
‘WebsiteId’: 2,
‘url’: ‘all’,
},
{
‘WebsiteId’: 3,
‘url’: ‘http://infinityknow.com’,
},
{
‘WebsiteId’: 4,
‘url’: ‘http://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;

READ :  AngularJS datagrid paging sorting filter using PHP and MySQL

$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]

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;
};

READ :  C# Shortest Superstring Problem Algorithms

[/php]

Example

Leave a Reply

Your email address will not be published. Required fields are marked *