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

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

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

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

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

READ :  VueJS Conditional show and hide Directives Example

Example

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

Example