AngularJs ng顯示/隱藏按鈕觸發器

Question

我的目標：根據ng-repeat復選框狀態顯示/隱藏div的按鈕。 柱塞

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

我已經更新了您的矮人。 請檢查矮人

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

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

柱塞

AngularJs ng顯示/隱藏按鈕觸發器

問題描述

5 個解決方案

解決方案1
0 2015-07-21 10:50:13

解決方案2
0 已采納 2015-07-21 10:54:16

解決方案3
0 2015-07-21 10:58:18

解決方案4
0 2015-07-21 11:03:15

解決方案5
0 2015-07-22 08:12:34

AngularJs ng顯示/隱藏按鈕觸發器

問題描述

5 個解決方案

解決方案1 0 2015-07-21 10:50:13

解決方案2 0 已采納 2015-07-21 10:54:16

解決方案3 0 2015-07-21 10:58:18

解決方案4 0 2015-07-21 11:03:15

解決方案5 0 2015-07-22 08:12:34

解決方案1
0 2015-07-21 10:50:13

解決方案2
0 已采納 2015-07-21 10:54:16

解決方案3
0 2015-07-21 10:58:18

解決方案4
0 2015-07-21 11:03:15

解決方案5
0 2015-07-22 08:12:34