AngularJs ng-show/hide 按钮触发

Question

我的目标：show/hide 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;
    }
  });
});

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

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>

请参考更新 fiddle：“http://plnkr.co/edit/7GXqApEjfPkZFsQeLbQM?p=preview”

Answer 3

请更改方法如下：

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

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

这应该可行（非常简洁的实现方式）。请参考plnkr

更新 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

根据原始 post 评论中明确的要求回答：

Angular 模型绑定是实时工作的：当你点击一个复选框时，它总是立即反映变化。要延迟更新直到下一次点击按钮，您可以将显示的结果存储在其他变量中，并在需要更改时更新它。

$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 按钮触发

AngularJs ng-show/hide button trigger

javascript

foreach

angularjs

ng-show