ng-repeat checbox click not toggling div visibility

Question

I am using ng-repeat for a list of items. I also have a checkbox for each item. When I click on a checkbox, a div with a ng-show="IsVisible" should be shown and when I click it back(uncheck), it should hide. I am not able to make it work.

Please find my code below.

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="repeatController">
    <table class="table table-hover table-striped table-condensed content-table">
      <thead>
        <tr>
          <th class="centered table-th">Select</th>
          <th class="sortable centered table-th">Name</th>
          <th class="sortable centered table-th">Age</th>
          <th class="sortable centered table-th">Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td class="centered">
            <input ng-model="watchObj.visualSelect[$index]" type="checkbox" ng-click="select(item)" value="item" />
          </td>
          <td class="centered">{{item.name}}</td>
          <td class="centered">{{item.age}}</td>
          <td class="centered">{{item.gender}}</td>
        </tr>
      </tbody>
    </table>

    <div ng-show="IsVisible" class="col-md-12 table-fx-btn-container">
      <button type="submit" ng-click="deleteName()" class="btn btn-default table-fx-btn">Delete Name</button>
      <button type="submit" ng-click="addName()" class="btn btn-default table-fx-btn">Add Name</button>
    </div>
  </div>
</body>

</html>

Here is my controller:

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

app.controller('repeatController', function($scope) {

  // $scope.watchObj.visualSelect = [];

  // $scope.$watch('watchObj.visualSelect', function(newVal, OldVal, scope) {
  //   console.log("bcd", scope.watchObj.visualSelect);
  //   for ( var i = 0; i < $scope.watchObj.visualSelect.length; i++) {
  //     if ($scope.watchObj.visualSelect[i] === true) {
  //       $scope.IsVisible = newVal;
  //     }
  //   }
  // });

  $scope.items = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
  ];
});

Here is my plunker link: Plunker Link

Please advice.

score 1 · Answer 1 · answered Nov 09 '17 at 19:57

I've edited a little bit your code, I think this is what you wanted, do you?

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

app.controller('repeatController', function($scope) {
  
  $scope.selectedItem = null;
  
  $scope.select = function(itemIndex){
    if(itemIndex == $scope.selectedItem)
      $scope.selectedItem = null;
    else
      $scope.selectedItem = itemIndex;
    
    
    for(var i = 0; i < $scope.allItems.length; i++){
      if(i == $scope.selectedItem)
        $scope.allItems[i] = true;
      else
        $scope.allItems[i] = false;
    }
  }
  

  $scope.items = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
  ];
  $scope.allItems = [
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false
    ];
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="repeatController">
    <table class="table table-hover table-striped table-condensed content-table">
      <thead>
        <tr>
          <th class="centered table-th">Select</th>
          <th class="sortable centered table-th">Name</th>
          <th class="sortable centered table-th">Age</th>
          <th class="sortable centered table-th">Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td class="centered">
            <input ng-model="allItems[$index]" type="checkbox" ng-change="select($index)" value="item" />
          </td>
          <td class="centered">{{item.name}}</td>
          <td class="centered">{{item.age}}</td>
          <td class="centered">{{item.gender}}</td>
        </tr>
      </tbody>
    </table>

    <div ng-show="allItems[selectedItem]" class="col-md-12 table-fx-btn-container">
      <button type="submit" ng-click="deleteName()" class="btn btn-default table-fx-btn">Delete Name</button>
      <button type="submit" ng-click="addName()" class="btn btn-default table-fx-btn">Add Name</button>
    </div>
  </div>
</body>

</html>

I think the best you can do is to add an additional field 'visible' to your item and changing its value when it is clicked, but if you can't modify the object, then this way it works. — Patriciu Nista, Nov 09 '17 at 20:00

score 1 · Accepted Answer · answered Nov 09 '17 at 20:05

I think you are over complicating things. If you want to show the buttons only when there is at least one item selected then you can do something like this:

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

app.controller('repeatController', function($scope) {

  $scope.isVisible = false;
  $scope.doItemChange = function(){
    var selectedItem = $scope.items.find( function(item){
        return item.isSelected;
    });
    
    $scope.isVisible = selectedItem!=null;
  }
  $scope.items = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
  ];
  

});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="repeatController">
    <table class="table table-hover table-striped table-condensed content-table">
      <thead>
        <tr>
          <th class="centered table-th">Select</th>
          <th class="sortable centered table-th">Name</th>
          <th class="sortable centered table-th">Age</th>
          <th class="sortable centered table-th">Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td class="centered">
            <input ng-model="item.isSelected" type="checkbox" ng-change="doItemChange()"/>
          </td>
          <td class="centered">{{item.name}}</td>
          <td class="centered">{{item.age}}</td>
          <td class="centered">{{item.gender}}</td>
        </tr>
      </tbody>
    </table>

    <div ng-show="isVisible" class="col-md-12 table-fx-btn-container">
      <button type="submit" ng-click="deleteName()" class="btn btn-default table-fx-btn">Delete Name</button>
      <button type="submit" ng-click="addName()" class="btn btn-default table-fx-btn">Add Name</button>
    </div>
  </div>
</body>

</html>

ng-repeat checbox click not toggling div visibility

2 Answers2