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

Question

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

每个 div 都有一个按钮!

• 第一次点击该按钮时:
  • div 的border-color 将变为蓝色(这意味着 div 变为选中)。
  • “确定”按钮应隐藏(仅使选定的 div 可见)。

• 第二次点击 div 内的任意位置；它应该取消选择它:

  • 边框恢复为黑色。
  • 按钮再次可见。

• 第一次点击全选按钮时，应该选择 div。下次单击同一按钮后，它应该取消选择。 (像切换 Action )

我如何使用 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>

Answer 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