Learn how to utilize AngularJS Material to toggle the enable/disable functionality of a checkbox

Can someone assist me in enabling and disabling the checkbox as shown in the attachment image https://i.stack.imgur.com/l6g1C.jpg

View the PLNKR

angular.module('BlankApp', ['ngMaterial'])
.config(['$mdThemingProvider', function($mdThemingProvider) {
    'use strict';
    $mdThemingProvider.theme('default')
    .primaryPalette('blue');
}])

.controller('CheckboxController', ['$scope','$filter',function($scope, $filter) {
    $scope.filterData = [
        {
            id: 1,
            title: "Attribute Type",
            list: [
                    {
                        "listTitle": "Attribute 1",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 2",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 3",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 4",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 5",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 6",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 7",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 8",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 9",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 10",
                        "checked": false,
                    }
                ]
        }
    ]
    $scope.isDisabled = true;
    $scope.$watch('filterData[0].list', function(newval, oldval) {
        if (newval !== oldval) {
        $scope.brands = [];
        $scope.isDisabled = false;
        angular.forEach($filter('filter')(newval, {checked:true}), function(lists) {
            $scope.brands.push(lists.listTitle);
        });
        }
    }, true);
    $scope.clickButton = function(brands) {
        console.log(brands);
        $scope.selectedAlarms = brands;
        console.log(`Selected Alarms = ${$scope.selectedAlarms}`);
    }
}]);
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>checkbox</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body ng-app="BlankApp" ng-cloak ng-controller="CheckboxController">
        <md-content>
            <div layout="column">
                <div layout="row" layout-wrap class="epg-checkbox-group" ng-repeat="filterDatas in filterData ">
                    <md-subheader class="md-primary" flex="100">{{filterDatas.title}}</md-subheader>
                    <div flex="50" class="epg-checkbox" ng-repeat="lists in filterDatas.list">
                        <md-checkbox aria-label="checkbox" ng-model="lists.checked">{{lists.listTitle}}</md-checkbox>
                    </div>
                    <md-button ng-click="clickButton(brands)" class="md-raised md-primary" ng-disabled="isDisabled">Apply</md-button>
                </div>
                <div ng-if="selectedAlarms" layout="row" layout-wrap>
                    <md-subheader class="md-primary">Selected</md-subheader>
                    <div layout="row" layout-wrap flex="100" class="epg-checkbox-group p-b16" ng-repeat="filterDatas in filterData">
                        <div flex="50" ng-if="lists.checked" class="epg-checkbox" ng-repeat="lists in filterDatas.list" >
                            <md-checkbox aria-label="checkbox" ng-model="lists.checked">{{lists.listTitle}}</md-checkbox>
                        </div>
                    </div>
                </div>
            </div>
        </md-content>
        <!-- Angular Material requires Angular.js Libraries -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
        <!-- Angular Material Library -->
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
    </body>
</html>

If any selected checkbox is unchecked, it should move back to the "Attribute Type".

cssangularjshtmlangularjs-material

Answer №1

Insert the following code on line 20.

 ng-hide="lists.checked"

Your md-content should now look like this:

<md-content>
        <div layout="column">
            <div layout="row" layout-wrap class="epg-checkbox-group" ng-repeat="filterDatas in filterData ">
                <md-subheader class="md-primary" flex="100">{{filterDatas.title}}</md-subheader>
                <div flex="50" class="epg-checkbox" ng-repeat="lists in filterDatas.list" ng-hide="lists.checked">
                    <md-checkbox aria-label="checkbox" ng-model="lists.checked">{{lists.listTitle}}</md-checkbox>
                </div>
                <md-button ng-click="clickButton(brands)" class="md-raised md-primary" ng-disabled="isDisabled">Apply</md-button>
            </div>
            <div ng-if="selectedAlarms" layout="row" layout-wrap>
                <md-subheader class="md-primary">Selected</md-subheader>
                <div layout="row" layout-wrap flex="100" class="epg-checkbox-group p-b16" ng-repeat="filterDatas in filterData">
                    <div flex="50" ng-if="lists.checked" class="epg-checkbox" ng-repeat="lists in filterDatas.list">
                        <md-checkbox aria-label="checkbox" ng-model="lists.checked">{{lists.listTitle}}</md-checkbox>
                    </div>
                </div>
            </div>
        </div>
    </md-content>

If possible, it is recommended to move your code from the clickButton function directly to the controller to resolve any issues.

Answer №2

here is the revised code snippet:

angular.module('BlankApp', ['ngMaterial'])
.config(['$mdThemingProvider', function($mdThemingProvider) {
    'use strict';
    $mdThemingProvider.theme('default')
    .primaryPalette('blue');
}])

.controller('CheckboxController', ['$scope','$filter',function($scope, $filter) {
    $scope.filterData = [
        {
            id: 1,
            title: "Attribute Type",
            list: [
                    {
                        "listTitle": "Attribute 1",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 2",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 3",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 4",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 5",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 6",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 7",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 8",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 9",
                        "checked": false,
                    }, 
                    {
                        "listTitle": "Attribute 10",
                        "checked": false,
                    }
                ]
        }
    ]
    $scope.isDisabled = true;
                $scope.$watch('filterData[0].list', function(newval, oldval) {
                    if (newval !== oldval) {
                     $scope.brands = [];
                    $scope.isDisabled = false;
                    angular.forEach($filter('filter')(newval, {checked:true}), function(lists) {
                        $scope.brands.push(lists.listTitle);
                    });     
                    }
                }, true);

                $scope.doSomething = function(list,bool,name,index) {
                  $scope.ind=index;
                  if(!bool){
                   $scope.filterData[0].list[index].removedchecked=true;
                   $scope.filterData[0].list[index].removed=true;
                  }
                }
                $scope.clickButton = function(brands) {
                  console.log($scope.innerIndex)
                    $scope.selectedAlarms = brands;
                    $scope.filterData[0].list[$scope.ind].removed=true;
                    $scope.filterData[0].list[$scope.ind].removedchecked=true;
                    console.log(`Selected Alarms = ${$scope.selectedAlarms}`);
                }
            }]);
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>checkbox</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body ng-app="BlankApp" ng-cloak ng-controller="CheckboxController">
        <md-content>
            <div layout="column">
                <div layout="row" layout-wrap class="epg-checkbox-group" ng-repeat="filterDatas in filterData" ng-init="outerIndex=$index">
                    <md-subheader class="md-primary" flex="100">{{filterDatas.title}}</md-subheader>
                    <div flex="50" class="epg-checkbox" ng-repeat="lists in filterDatas.list " ng-init="innerIndex=$index">
                        <md-checkbox aria-label="checkbox" ng-model="lists.checked" ng-change="doSomething(lists,lists.checked,lists.listTitle,innerIndex)" ng-hide=lists.removedchecked>{{lists.listTitle}}</md-checkbox >
                    </div>
                    <md-button ng-click="clickButton(brands)" class="md-raised md-primary" ng-disabled="isDisabled">Apply</md-button>
                </div>
                <div ng-if="selectedAlarms" layout="row" layout-wrap>
                    <md-subheader class="md-primary">Selected</md-subheader>
                    <div layout="row" layout-wrap flex="100" class="epg-checkbox-group p-b16" ng-repeat="filterDatas in filterData">
                        <div flex="50" ng-if="lists.removed" class="epg-checkbox" ng-repeat="lists in filterDatas.list" >
                            <md-checkbox aria-label="checkbox" ng-model="lists.checked" >{{lists.listTitle}}</md-checkbox>
                        </div>
                    </div>
                </div>
            </div>
        </md-content>
        <!-- Angular Material requires Angular.js Libraries -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
        <!-- Angular Material Library -->
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why @font-face doesn't display on older versions of Internet Explorer like IE 7 and IE

Our website has the following CSS code. The use of a smiley face is to ensure compatibility with IE 7 and IE 8. However, while the site's fonts display correctly on IE 9, Chrome, Firefox, etc., there seems to be an issue with IE 7 and 8. @font-face { ...

cssfonts

The jQuery functions properly offline, but fails to load when connected to the

I am encountering an issue with the following script: <script type="text/javascript"> $.getJSON("http://api.twitter.com/1/statuses/user_timeline/koawatea.json?count=1&include_rts=1&callback=?", function(data) { $("#headertweet") ...

javascriptjqueryhtmljson

The issue of the Facebook like button not appearing may be due to the sequence in which FB.getLoginStatus() is being

After following the instructions on Facebook's site (http://developers.facebook.com/docs/reference/plugins/like/) to add a basic like button to my website using HTML5, XFBML, and iFrame methods without success, I suspected there may be an issue with m ...

facebookhtmlfacebook-likefacebook-javascript-sdk

Transform inline styles in React to CSS declarations

Is there a tool available that can convert React inline style descriptions into CSS rules? For example: { minHeight: 200, position: 'relative', flexGrow: 1, flexShrink: 1, display: 'flex', flexDirection: ' ...

cssreactjs

Execute location.replace when the "control" key is pressed

document.addEventListener('keydown', (event) => { var name = event.key; var code = event.code; if (name === 'Control') { location.replace(classroom.google.com) } if (event.ctrlKey) { alert(`Combinatio ...

javascripthtmlcss

Flask Template Failing to Load Local CSS

Hello there, I am currently working on integrating custom CSS into my Flask application. While I had no issues loading Bootstrap, I seem to be facing some difficulties with my local CSS. Below is the method I am using to load my CSS: <link rel="st ...

pythoncssflaskjinja2

invalid audio element

I'm currently working on building an audio player with a visualizer feature. However, when I try to initiate the audio player by clicking on the input button, my debug console keeps showing this error message: Uncaught (in promise) DOMException: Fa ...

javascriptjqueryhtmlaudio

Issue with showing multiple images on HTML page

I'm currently working on enhancing my webpage by enabling the upload of multiple images. However, I'm facing challenges in figuring out how to obtain a valid URL for the image source and to verify if the correct number of files have been uploaded ...

javascripthtml

What is the best way to contain my content within a bordered box?

As a beginner in HTML and CSS, I have successfully created a basic website with a simple menu at the top that includes links to different pages like "Home," "About," and "Contact." The website will mainly feature information and images, but I believe it wo ...

htmlcss

Optimizing VueJS applications with browser caching features for faster loading

I've encountered an issue with my VueJS app. After running npm run build, a new set of dist/* files are generated. However, when I upload them to the server (replacing the old build) and try to access the page in the browser, it seems to be loading th ...

htmlvue.jsbrowser-cache

The child div can be scrolled horizontally, while the parent window remains fixed

I am facing a challenge with my HTML and CSS setup. I want to create a child div that scrolls horizontally, but I do not want the parent window to scroll along with it. Below is my current code: <div id="parent"> <div id="div1"> . ...

javascripthtmlcss

Step-by-step guide for integrating a Twig file in Symfony using Angular's ng-include feature

Seeking guidance in Angular, as a newcomer to the platform. I attempted to load a template within an ng-repeat loop like so, but encountered an error. I received the following error message: "Cross origin requests are only supported for protocol schemes ...

javascriptangularjssymfonytwig

Effortless sliding panel that appears on hover and vanishes when mouse is moved away

I am in the process of creating a menu for my website that utilizes linkbuttons which trigger additional linkbuttons to slide down upon hover. The desired effect is a smooth sliding panel that appears when hovering over the linkbutton, and disappears when ...

javascriptjqueryhtmlcss

Is it possible to customize bootstrap classes for a unique bootstrap css design?

In my MVC4 project, I faced a situation where I had a global.css class with some classes that conflicted with Bootstrap after adding it. To resolve this, I created a new file called bootstrap_migration.css. In this file, I prefixed the Bootstrap classes wi ...

htmlcssasp.net-mvc-4twitter-bootstrap

Can you explain the concept of transformRequest in AngularJS?

I'm dealing with a specific code snippet transformRequest: function(obj) { var str = []; for(var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); return str.join("&"); } This code ...

angularjs

AngularUI design pattern for redirecting to a URL post login

In a particular scenario, a user is able to input a URL like: http://localhost:8080/#/component?id=1234 Initially, AngularUI checks if the user has authorization. If not authorized, they are redirected to the login page using the following code: $state. ...

angularjsangular-ui

Attempting to transfer user information to MongoDB using AngularJS and Node.js

Greetings everyone! I am currently working on a template and trying to develop a backend for it, starting with the registration form. Despite having some kind of connection between my mongodb and my app, data is not being sent to the database. Here is the ...

javascriptangularjsnode.jsmongodbexpress

Unexpected results with mix-blend-mode difference

I am struggling with making a black text element overlap a black div while ensuring that the overlapping part of the text appears white. I attempted to use the mix-blend-mode property, but it does not seem to be working as expected. Why is this happening? ...

htmlcss

Troubleshooting Issue with Importing File into CSS Document

I'm currently working on building a website and I've been trying to import an image to use as the header. I want to add this .png picture to my CSS file, but despite extensive research and double checking everything, I still can't figure out ...

htmlcssimagefilepath

How can you assign a default value in a React select dropdown and dynamically add the remaining values?

I'm currently developing a React application that includes a form with a select dropdown feature. My goal is to have the 'uom' field value from the selected product record automatically set as the default option in the dropdown when the user ...

javascripthtmlreactjs