Estoy usando ng-repeat para obtener una lista de elementos. También tengo una casilla de verificación para cada elemento. Cuando hago clic en una casilla de verificación, debería mostrarse un div con ng-show = "IsVisible" y cuando hago clic en él (desmarcar), debería ocultarse. No puedo hacer que funcione.

Por favor, encuentre mi código a continuación.

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

Aquí está mi controlador:

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'}
  ];
});

Aquí está mi enlace de plunker: Enlace de Plunker

Por favor, aconseje.

0
a2441918 9 nov. 2017 a las 21:55

2 respuestas

La mejor respuesta

Creo que estás complicando demasiado las cosas. Si desea mostrar los botones solo cuando hay al menos un elemento seleccionado, puede hacer algo como esto:

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>
1
Hoyen 9 nov. 2017 a las 20:05

He editado un poco tu código, creo que esto es lo que querías, ¿verdad?

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>
1
Patriciu Nista 9 nov. 2017 a las 19:57