Our requirement is that, we need to list all the css names in a dropdownlist. So we would be having 5 names in the dropdown. (i.e TasteSomeCoffee,FreshAqua,TangerineSpark,CarbonSteel,AlmondsandCashews).
Also if any new css file is been added, we would have to add that name to the dropdownlist. We are also having a button below the dropdown and on button click. We should enable a css, the rest of the css is to be disabled.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link href="../Css/StyleSheet1.css" rel="stylesheet" /> <link href="../Css/StyleSheet2.css" rel="stylesheet" /> <link href="../Css/StyleSheet3.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="myCtrl">
<select data-ng-model="selectedname" data-ng-options="x.name for x in names" required="required">
<option value="" style="display: none">-- Select option --</option>
</select>
<input id="Button1" type="button" value="Eable above css" ng-click="MyFunction(selectedname)" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.selected = true;
$scope.names = [];
var stylesheetlist = document.styleSheets;
var styleSheets = document.getElementsByTagName("link");
for (var i = 0; i < styleSheets.length; i++) {
var styleSheet = styleSheets[i];
styleSheet.disabled = true;
var href = styleSheets[i].href;
if (href != null) {
var filename = (href.split('/')[href.split('/').length - 1]).split('.')[0];
var file = { name: filename };
//$scope.names.push(filename);
$scope.names.push(file);
}
}
$scope.MyFunction = function (selectedname) {
var styleSheets = document.getElementsByTagName("link");
for (var i = 0; i < styleSheets.length; i++) {
var styleSheet = styleSheets[i];
var href = styleSheet.href;
if (href && href.indexOf(selectedname.name) != -1) {
styleSheet.disabled = false;
}
}
}
});
</script>
Output:
Best regards
Cathy
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
6 Points
43 Posts
Applying CSS on Button click through AngularJS
Oct 04, 2017 08:49 PM|ashvinvee|LINK
Hi,
I have the below css files in my project.
Our requirement is that, we need to list all the css names in a dropdownlist. So we would be having 5 names in the dropdown. (i.e TasteSomeCoffee,FreshAqua,TangerineSpark,CarbonSteel,AlmondsandCashews).
Also if any new css file is been added, we would have to add that name to the dropdownlist. We are also having a button below the dropdown and on button click. We should enable a css, the rest of the css is to be disabled.
Any pointers on how this could be achieved.
Thanks,
Ashvin
Star
8670 Points
2882 Posts
Re: Applying CSS on Button click through AngularJS
Oct 05, 2017 05:58 AM|Cathy Zou|LINK
Hi ashvinvee,
Are you want something as below?
Output:
Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.