在angularjs切换操作中单击按钮时选择和取消选择div答案

【问题标题】：select and unselect div on click on button in angularjs toggle action在angularjs切换操作中单击按钮时选择和取消选择div
【发布时间】：2019-09-09 08:53:36
【问题描述】：

我在一个页面中有多个 div 容器。

每个div 都有一个按钮！

首先单击该按钮：
- div 的 border-color 将变为蓝色（这意味着 div 变为 selected）。
- “确定”按钮应该隐藏（只留下选定的div 可见）。
第二次单击div 内的任意位置；它应该取消选择它：
- 边框恢复为黑色。
- 按钮再次可见。
第一次点击全选按钮时，div 应该被选中。下次单击同一按钮后，它应该会被取消选择。（如切换动作）

如何使用 AngularJS 做到这一点。

fiddle

function MainCtrl($scope) {
   $scope.addBackground = function () {
       angular.element(document.querySelector('.container')).addClass('selectedBorder');
      angular.element(document.getElementById('okBtn')).css('display','none');
    };
};

.container{
  width:30%;
  height:100px;
  border:1px solid black;
  margin:10%;
}
button.btn.btn-primary{
  margin-top:10%;
  margin-left: 40%;
}
.selectedBorder{
  border: 3px solid blue;
}

<div id="myAngularApp" title="Angular Scope" ng-app ng-controller="MainCtrl">
   
<div class="container">
<button id="okBtn" class="btn btn-primary" ng-click="addBackground()">ok</button> 
</div>
</div>

【问题讨论】：

编辑了您的代码。看看这个：jsfiddle.net/ns9q71rp
你不应该在 jQuery 中使用 DOM API，除非它是 inside 指令。
@MaksymBezruchko 能否请您再次更新代码。我又加了一点

标签： javascript html css angularjs

【解决方案1】：

您必须使用 ng-class 和 ng-show 才能以 AngularJs 方式进行操作：

<div class="container" ng-class="{ 'selectedBorder': containerSelected }" ng-click="toggleContainer()">
    <button id="okBtn" class="btn btn-primary" ng-click="toggleButton($event)" ng-show="buttonVisible">ok</button> 
</div>

function MainCtrl($scope) {

   $scope.containerSelected = false;
   $scope.buttonVisible = true;
   $scope.toggleButton = function (e) {
       $scope.containerSelected = true;
       $scope.buttonVisible = false;
       e.stopPropagation();
    };
    $scope.toggleContainer = function (e) {
       if($scope.containerSelected){
           $scope.containerSelected = false;
           $scope.buttonVisible = true;
       }
    };

};

工作演示：demo

【讨论】：

非常感谢。它工作正常。你能帮我吗？我已经编辑了我的小提琴。我外面还有一个按钮。如果我第一次单击它应该选择。如果我再次单击同一个按钮，它应该取消选择。
外部 selectall 按钮也应该执行相同的操作。

【解决方案2】：

您可以使用$event.stopPropagation(); 在点击框时使用另一个事件。

function MainCtrl($scope) {
   $scope.addBackground = function () {
       angular.element(document.querySelector('.container')).addClass('selectedBorder');
      angular.element(document.getElementById('okBtn')).css('display','none');
    };
    
    $scope.removeBackground = function () {
       angular.element(document.querySelector('.container')).removeClass('selectedBorder');
      angular.element(document.getElementById('okBtn')).css('display','initial');
    };
};

.container{
  width:30%;
  height:100px;
  border:1px solid black;
  margin:10%;
}
button.btn.btn-primary{
  margin-top:10%;
  margin-left: 40%;
}
.selectedBorder{
  border: 3px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

<div id="myAngularApp" title="Angular Scope" ng-app ng-controller="MainCtrl" ng-click="removeBackground()">
   
<div class="container">
<button id="okBtn" class="btn btn-primary" ng-click="addBackground(); $event.stopPropagation();">ok</button> 
</div>
</div>

【讨论】：