Ng-Controller-8

 

Ng-Controller-8

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> .default { border: 1px solid green !important; background-color: white; color: green; } </style> </head> <body ng-app="app"> <div class="container"> <div ng-controller="controller"> <h3>Select Course</h3> <table> <thead> <tr><td ng-repeat="p in btnNames"><a class="btn btn-success" style="float:left;margin:5px;" ng-class="{true:'default',false:''}[a]" ng-click="a=!a;selecterCourse(p)">{{p}}</a></td></tr> </thead> </table><br /> <span ng-show="Arrs.length>0"><b>Selected Course : </b><span ng-repeat="p in Arrs">{{p}}<span ng-hide="$last">-</span></span></span> </div> </div> <script> var app = angular.module('app', []); app.controller('controller', function ($scope) { $scope.btnNames = ["LearnIt", "AngularJs", "Bootstrap"]; $scope.Arrs = []; $scope.selecterCourse = function (selectedCourse) { var idx = $scope.Arrs.indexOf(selectedCourse); if (idx > -1) $scope.Arrs.splice(idx, 1); else $scope.Arrs.push(selectedCourse); } }) </script> </body> </html>
Output