AngularJs的ng-show/hide按钮触发器

AngularJs ng-show/hide button trigger

本文关键字：按钮 触发器 hide ng-show AngularJs      更新时间：2023-09-26

我的目标:根据其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消失了。

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 =预览"

您专门为复选框创建了监视，并在发生任何更改时隐藏div，但您称之为问题…

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

移除这个部分是否达到了你想要的效果?

用||来更新

<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>
我已经更新了你的活塞。请检查柱塞

请将方法更改如下:

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

你也可以不添加观察者

这应该可以工作(非常干净的方法)。请参考

UPDATE PLNKR:

http://plnkr.co/edit/WN9ohx?p =预览

根据原文评论中明确的要求回答:

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>

恰好

相关文章：