how to add an element to a div when checkbox is checked, and remove when checkbox is unchecked. Thank you

Question

I am new to AngularJS. I want something like: when I click a checkbox it adds that checkbox name to a div and when I uncheck it, it simply remove that item from there using AngularJS.

It is like a team player list with players having checkboxes. As I check a checkbox that player is added to the list and when I un-check it simply removes from that list.

Thanks

Thank you everyone for your effort. – rahim.nagori Aug 18 '18 at 07:28 — rahim.nagori, Aug 18 '18 at 07:28

score 2 · Accepted Answer · answered Aug 17 '18 at 18:42

2

Use the ng-show directive.

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
   <input type="checkbox" ng-model="showDiv">Show div<br />
   <div ng-show="showDiv">
       This is hidden when the box is unchecked
   </div>
</body>

answered Aug 17 '18 at 18:42

georgeawg

48,608
13
72
95

Very simple and easy solution. I liked it. One more suggestion: We can also use ng-if in place of ng-show. BTW answer is correct. Thanks. – rahim.nagori Jan 04 '19 at 10:28
1

The `ng-show` directive uses less overhead. See [When to favor ng-if vs. ng-show/ng-hide?](https://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide). – georgeawg Jan 04 '19 at 11:25

Anusha kurra · Answer 2 · 2018-08-17T10:49:12.290

Sample code below and here is the fiddle https://jsfiddle.net/eov3762d/4/

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>checkbox</title>
        <!-- Angular Material style sheet -->
        <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" ng-init="outerIndex1=$index">
                        <div flex="50" ng-if="lists.removed" class="epg-checkbox" ng-repeat="lists in filterDatas.list" ng-init="innerIndex1=$index">
                            <md-checkbox aria-label="checkbox" ng-model="lists.checked" ng-change="removefromlist(lists,lists.checked,lists.listTitle,innerIndex1)" ng-hide=lists.removedchecked1>{{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>
        <!-- Your application bootstrap  -->
        <script type="text/javascript">    
            /**
            * You must include the dependency on 'ngMaterial' 
            */
            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.removefromlist = function(list,bool,name,index) {

                  if(!bool){
                   $scope.filterData[0].list[index].removedchecked1=true;
                   $scope.filterData[0].list[index].removedchecked=false;
                  }
                }

                $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].removedchecked1=false;
                    $scope.filterData[0].list[$scope.ind].removedchecked=true;
                    console.log(`Selected Alarms = ${$scope.selectedAlarms}`);
                }
            }]);
        </script>
    </body>
</html>

I saw the fiddle provided by you. Check functionality is working but when I un check list is not changing. — rahim.nagori, Aug 17 '18 at 07:00

score 0 · Answer 3 · answered Aug 18 '18 at 07:29

 var myApp = angular.module('myApp', []);

    myApp.controller('myController', ['$scope', function ($scope) {
        $scope.addTeam = function (list) {
            var books = [];
            angular.forEach(list, function (value, key) {
                if (list[key].selected == list[key].name) {
                    books.push(list[key].selected);
                }
            });
            // SHOW THE SELECTED ITEMS IN THE EXPRESSION.
   if (books.length > 0)
                $scope.the_list = books.toString();
            else
                $scope.the_list = 'Please choose a player';
        }
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="row">
    <div class="col-md-6 col-md-offset-3">
     <h2 class="text-primary">Player options</h2>
     <div class="text-primary" ng-app="myApp" ng-controller="myController"
     ng-init="list=[
     { name:'Player 1' }, 
     { name:'Player 2'}, 
     { name:'Player 3' }, 
     { name:'Player 4' }, 
     { name:'Player 5' }]">
      <div ng-repeat="books in list">
      <input type="checkbox" ng-model="books.selected"
      ng-true-value="'{{books.name}}'" ng-false-value="''"
      id="'{{books.name}}'" ng-change="addTeam(list);"/>
      {{ books.name }}
      </div>
     <h2>Team</h2>
     <h3>Selected Players</h3>
     <div class="text-primary">{{the_list}}</div>
     </div>
    </div>
   </div>
  </div>

score 0 · Answer 4 · answered Aug 18 '18 at 08:55

plunk

HTML

    <!DOCTYPE html>
    <html ng-app="testApp">
      <head>
        <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
      </head>
      <body ng-controller="test">
        <label>Divisions Participating*</label>
        <div class="radio-check-wrap">
          <ul class="radio-check-group">
            <li ng-repeat="d in divisions">
              <input type="checkbox" ng-model="d.selected" class="" id="{{'div' + d.Id}}" name="selectedDivisions[]" />
              <label for="div{{$index}}">{{d.Description}}</label>
            </li>
            <ul>
              <li ng-repeat="s in d.subd">
                <input type="checkbox" ng-model="s.selected" class="" id="{{'div' + d.Id}}" name="selectedsubd[]" />
                <label for="div{{$index}}">{{s.Description}}</label>
              </li>
            </ul>
          </ul>
          {{tradeshow.Divisions|json}}
        </div>
      </body>
    </html>

Script

  var testApp = angular.module('testApp', [])
  .controller('test', ['$scope', 'filterFilter', 
    function($scope, filterFilter) {
      $scope.divisions = [
        { Description: 'test1', Id: 1 },
        { Description: 'test2', Id: 2 },
        { Description: 'test3', Id: 3 },
        { Description: 'test4', Id: 4 },
        { Description: 'test5', Id: 5 }
      ];

        $scope.subd = [
        { Description: 'sub1', Id: 7 },
        { Description: 'sub2', Id: 8 },
        { Description: 'sub3', Id: 9 }
      ];

      $scope.tradeshow = { };
      $scope.tradeshow.Divisions = [];

      // helper method
      $scope.selectedDivisions = function selectedDivisions() {
        return filterFilter($scope.tradeshow.Divisions, { selected: true });
      };

      // watch divisions for changes
      $scope.$watch('divisions|filter:{selected:true}', function (nv) {
        $scope.tradeshow.Divisions = nv.map(function (division) {
          return {Id: division.Id};
        });
      }, true);
    }
  ]);

how to add an element to a div when checkbox is checked, and remove when checkbox is unchecked. Thank you

4 Answers4