Question

我的目标：显示/隐藏div的按钮，具体取决于其ng-repeat复选框状态。 Plunker

  <button ng-click="toggleIt()">Toggle it</button>
  <p>Check all</p>
  <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
  <br />
  <p>Checkboxes</p>
  <input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected">
  <div ng-show="checkbox[0].selected && shownow">Slave one showed!</div>
  <div ng-show="checkbox[1].selected && shownow">Slave two showed!</div>
  <div ng-show="checkbox[2].selected && shownow">Slave three showed!</div>

app.controller('MainCtrl', function($scope) {
  $scope.checkbox = [{
    selected: false
  }, {
    selected: false
  }, {
    selected: false
  }];
  // Check/uncheck all boxes
  $scope.checkAll = function() {
    angular.forEach($scope.checkbox, function(obj) {
      obj.selected = $scope.selectAll;
      $scope.shownow = false;
    });
  };

  $scope.shownow = false;


  $scope.toggleIt = function() {
    $scope.shownow = true;
  }

  $scope.$watchGroup(['checkbox[0].selected', 'checkbox[1].selected', 'checkbox[2].selected'], function(newValue, oldValue) {
    if (newValue != oldValue) {
      $scope.shownow = false;
    }
  });
});

问题：取消选中其中一个复选框后，div消失。但它不应该......

Answer 1

只需使用||

进行更新即可

<div ng-show="checkbox[0].selected || shownow">Slave one showed!</div>
<div ng-show="checkbox[1].selected || shownow">Slave two showed!</div>
<div ng-show="checkbox[2].selected || shownow">Slave three showed!</div>

我已经更新了您的plunker。请检查plunker

Answer 2

执行类似

的操作

Js档案

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

app.controller('MainCtrl', function($scope) {
  $scope.checkbox = [
    {
      selected: false
    },
    {
      selected: false
    },
    {
      selected: false
    }
  ];
  // Check/uncheck all boxes
  $scope.checkAll = function () {
    angular.forEach($scope.checkbox, function (obj) {
      obj.selected = $scope.selectAll;
       $scope.shownow = true;
    });
  };

  $scope.toggleIt = function(){
    $scope.shownow = !$scope.shownow;
    $scope.selectAll = ! $scope.selectAll
    $scope.checkAll();
  }

});

Html文件

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <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.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">


  <button ng-click="toggleIt()">Toggle it</button>
  <p>Check all</p>
  <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
  <br />

  <p>Checkboxes</p>
  <input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected">


  <div ng-show="checkbox[0].selected && shownow">Slave one showed!</div>
  <div ng-show="checkbox[1].selected && shownow">Slave two showed!</div>
  <div ng-show="checkbox[2].selected && shownow">Slave three showed!</div>
</body>
</html>

请参阅更新小提琴：“http://plnkr.co/edit/7GXqApEjfPkZFsQeLbQM?p=preview”

Answer 3

请按以下方式更改方法：

$scope.toggleIt = function(){
    $scope.shownow = !$scope.shownow;
  }

你也可以取消添加观察者。

这应该有效（非常干净的方式）。请参考plnkr

UPDATE PLNKR：

http://plnkr.co/edit/WN9ohx?p=preview

Answer 4

您专门为复选框创建了一个监视器，并在发生任何更改时隐藏div，但您将其称为问题...

$scope.$watchGroup(['checkbox[0].selected', 'checkbox[1].selected', 'checkbox[2].selected'], function(newValue, oldValue) {
    if (newValue != oldValue) {
      $scope.shownow = false;
    }
});

是否正在移除此部分达到您想要的效果？

Answer 5

在原始帖子的评论中回答每个澄清的要求：

角度模型绑定实时工作：当您单击复选框时，它会立即反映更改。要将更新延迟到下次单击按钮，您可以将显示的结果存储在其他变量中，并在需要更改时更新它。

$scope.showDivs = $scope.checkbox.map(function(item){
  return item.selected;
});

<div ng-show="showDivs[0]">Slave one showed!</div>
<div ng-show="showDivs[1]">Slave two showed!</div>
<div ng-show="showDivs[2]">Slave three showed!</div>

Plunker

AngularJs ng-show / hide按钮触发器

5 个答案: