javascript - angularjs中div的多选和单选

Question

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

• 我在顶部有一个全选按钮，在容器内有 3 个带有 ok 按钮的 div。

• 如果我单击“全选”按钮，我应该选择里面的所有 div。

• 如果我单击容器内的任何 div，则只有特定的 div 应该被取消选择。现在一切都被取消了。

• 如果我单击全选按钮，我需要在一个参数中传递所有三个 div（即 selectAll(div1,div2,div3)）。

• 单击 selectall ok 按钮后，将隐藏并显示唯一的 div。如果我单击选定的任何 div，则该特定 div 应该被取消选择。（即，如果我选择第二个 div，div2 应该被取消选择，第一个和口渴仍然应该被选择）

• 我不想使用 $index 因为我里面有多个 div。每个 div 都有一个唯一的 id。我想传递那个id。

jsfiddle

function MainCtrl($scope) {
   
   $scope.containerSelected = false;
   $scope.buttonVisible = true;
   $scope.toggleButton = function (e) {
   
   console.log('toggleButton')
       $scope.containerSelected = true;
       $scope.buttonVisible = false;
       e.stopPropagation();
    };
   
    $scope.toggleContainer = function (e) {
    console.log('toggleContainer', $scope.containerSelected)
       if($scope.containerSelected){
           $scope.containerSelected = false;
           $scope.buttonVisible = true;
       }
    };
    
};

#myApp{
  width:100%;
  display:-webkit-inline-box;
  border :1px solid black;
  margin-top:55px;
}
.container{
  width:10%;
  height:100px;
  border:1px solid black;
  margin:10%;
}
button.btn.btn-primary{
  margin-top:25%;
  margin-left: 40%;
}
.selectedBorder{
  border: 3px solid blue;
}
#selectALL{
  margin-top:20px;
}

<div  title="Angular Scope" ng-app ng-controller="MainCtrl">
 <button id="selectALL" ng-click="toggleButton($event)">Select All</button> 
 <div id="myApp">
 

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

</div>
 </div>

标签： javascripthtmlcssangularjs