如何仅使用AngularJS材质启用/禁用复选框

时间：2018-08-16 11:16:18

标签： html css angularjs html5 angularjs-material

请帮助我如何根据附件图片启用和禁用复选框 enter image description here

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>

如果我取消选中选中的复选框，则应替换为“属性类型”。

2 个答案:

答案 0 :(得分：0)

将其添加到第20行。

 ng-hide="lists.checked"

现在，您的md内容将类似于

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

如果可能的话，请将您的代码从clickButton函数直接移至控制器...这将解决所有问题。

答案 1 :(得分：0)

这是更新的代码。

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>

相关问题
最新问题