Remove From My Forums

Applying CSS on Button click through AngularJS

Question
0

Sign in to vote
User-1961814522 posted

Hi,

I have the below css files in my project.

<link href="~/css/bootstrap/TasteSomeCoffee.css" rel="stylesheet" /> <link href="~/css/bootstrap/FreshAqua.css" rel="stylesheet" /> <link href="~/css/bootstrap/TangerineSpark.css" rel="stylesheet" /> <link href="~/css/bootstrap/CarbonSteel.css" rel="stylesheet" /> <link href="~/css/bootstrap/AlmondsandCashews.css" rel="stylesheet" />

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
Wednesday, October 4, 2017 8:49 PM

All replies

User-707554951 posted

Hi ashvinvee,

Are you want something as below?

<!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

Thursday, October 5, 2017 5:58 AM

Asked by:

Applying CSS on Button click through AngularJS

Question

All replies