angularjsangularjs-ng-repeatangularjs-ng-show

ng-repeat checbox click not toggling div visibility

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.

Solution

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