locked
Applying CSS on Button click through AngularJS RRS feed

  • Question

  • 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