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

Having trouble using angular.isString in conjunction with ng-repeat

Is there a way to use angular.isString for comparison within an ng-if in an ng-repeat loop? Currently, all items in the array are being returned. I attempted to simply display the result of angular.isString, but no output is generated. This is my desired ...

javascriptangularjs

Showing nested div elements in a single row

I'm currently dealing with a react component that generates nested divs. My goal is to make sure all the divs are displayed on the same line, but the catch is I can only apply styles to the outermost container div. Is there a way to achieve this witho ...

htmlcssreactjs

What is the best method for incorporating a YouTube embedded video into an image carousel using HTML and CSS?

I'm encountering an issue with my product carousel that includes an image and a video. The image displays correctly, but when I attempt to click on the video to have it appear in the main carousel view, it doesn't function as expected. Here is a ...

javascripthtmlcsscarousel

Angular Editable Pop-up

I have implemented Xeditable in my AngularJS application to allow users to modify table values on the fly without the need for buttons. I use the blur attribute to quickly submit changes inline. <a href="#" buttons="no" blur="submit">{{ myValue }}&l ...

angularjsx-editable

Tips for adding a gradient to your design instead of a plain solid color

I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...

javascripthtmlcsssvg

Submitting a form using jquery in HTML

Below is the code I have created. It consists of a text-input field and a 'Search' button within a form. Upon clicking the search button (submitting the form), it should trigger the .submit function to carry out the necessary processing. HTML CO ...

jqueryhtmlajaxformssubmit

Execute the controller function with the value as a parameter

I encountered an issue while attempting to call a function in the c# controller and passing a value. The error message I received was: `'Unable to get property 'then' of undefined or null reference'. I also included the Driver Model but ...

javascriptc#angularjsasp.net-mvc

I am trying to confirm in PHP whether any of the gender checkboxes have been selected. However, the code I have tried so far does not appear to be functioning as expected

Please refrain from suggesting the use of checked = "checked" in HTML, as the validation must be performed in PHP as per the requirements of my assignment. PHP Code: if (isset($_POST["gender"])) { $gender = $_POST["gender"]; if (($gender != "male") || ( ...

phphtml

How can I pass $scope between controllers in AngularJS?

Just starting out with Angular Js. Can I pass the scope of the RestaurantController to the MenuController like this? For example: angular.module('restaurants').controller('RestaurantController', ['$scope', function($sco ...

angularjsangularjs-scope

Static response is the way to go! Asynchronous responses just don't cut it

Currently in the process of developing an angular directive for displaying real-time charts. Below is the code snippet that encompasses everything, including link: function() { }, within the directive. Here's the code for a static directive that func ...

javascriptangularjschartsangular-directive

When the user clicks, the template data should be displayed on the current page

I need help with rendering data from a template on the same HTML page. I want to hide the data when the back button is clicked and show it when the view button is clicked. Here is my code: <h2>Saved Deals</h2> <p>This includes deals wh ...

javascripthtmlmeteormeteor-helper

What is the maximum amount of information that can be stored in a data attribute within the DOM?

Occasionally, I find myself wanting to include a substantial amount of data on the webpage in order to minimize additional AJAX calls for dynamic content. However, I am concerned about potential performance implications. Is there a penalty I should be aw ...

javascripthtmldombrowser

Whenever I attempt to click on a Teaxarea, it automatically collapses and prevents me from typing my comments

After crafting my code on this link, I created three directives, each responsible for collapsing certain elements. Upon running the code, you will notice two panels where clicking on the address collapses it, and clicking on the comment also collapses it. ...

angularjsangularjs-directiveangularjs-scope

In Internet Explorer, the toggle div expands to fill the available space, but this behavior is not consistent in

Utilizing the toggle function in jQuery, I created a mechanism to switch between 4 different blocks of content. You can view a demonstration of how the functionality operates correctly in Google Chrome here: If you encounter any issues with the functiona ...

jqueryhtmlcss

Guide: Writing code that caters to different types of media in React using Material-UI

After reviewing the documentation, I believed that the optimal solution in later versions of material-ui was to use useMediaQuery, but unfortunately, I am unable to implement it correctly. My objective is to hide a menu when the page is being printed, so I ...

cssreactjsmaterial-ui

Utilizing the Current URL from the address bar as a variable to link within the same page

My goal is to: Extract the current URL address from the browser bar, which will have a format like this: http://example.com/test/index.html?&dv1=1023faf2ee37cbbfa441eca0e1a36c Retrieve the lengthy ID number located at the end of the URL 1023faf2ee37c ...

javascriptjqueryhtmlurl

Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this: I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" id="gadsDiv" runat=&q ...

htmlcsswhitespaceline-height

Design a custom icon for uploading multiple files

Looking to create a bootstrap-4 icon for multi-file upload. I've got the code reference for single file upload, but now I need to know how to create an icon for multi file upload. <!DOCTYPE html> <html> <head> & ...

htmlbootstrap-4multifile-uploader

No feedback received after sending keys using Selenium

Whenever I execute my code using PhantomJS and Selenium, the result appears to be correct. However, when it comes to using send_keys function, the code gets stuck without any errors, answers, or progress. I am puzzled and eager to find out why this is ha ...

pythonhtmlseleniumphantomjs

A Guide to Making a Floating Widget That Can Move Beyond the Boundaries of a Website in React

Currently, I am in the process of developing a project that requires the implementation of a floating widget capable of overlaying content not just within the confines of the website, but outside as well. This widget needs to have the ability to remain on ...

javascripthtmlreactjspipwidget