Applying CSS on Button click through AngularJSRSS

1 reply

Last post Oct 05, 2017 05:58 AM by Cathy Zou

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

- Reply
ashvinvee
Member

3 Points

16 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.
```
<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

Cathy Zou

Star

8650 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?

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

‹ Previous Thread|Next Thread ›