ng-repeat checbox点击不切换div可见性

时间：2017-11-09 18:55:42

标签： angularjs angularjs-ng-repeat angularjs-ng-show

我正在使用ng-repeat获取项目列表。我还有一个每个项目的复选框。当我点击一个复选框时，一个带有ng-show =＆＃34; IsVisible＆＃34;的div应该显示，当我点击它（取消选中）时，它应该隐藏。我无法使其发挥作用。

请在下面找到我的代码。

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

这是我的控制器：

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

以下是我的plunker链接：Plunker Link

请建议。

2 个答案:

答案 0 :(得分：1)

我编辑了一些你的代码，我想这就是你想要的，是吗？

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 :(得分：1)

我认为你过于复杂化了。如果您只想在选择了至少一个项目时显示按钮，那么您可以执行以下操作：

＆＃13;
＆＃13; 
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'}
  ];
  

});
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题