角度范围和 ng-click / ng-show 设置多个 div

我正在为迄今为止的代码寻求一些帮助。

主要目标是能够单击任何加号图标并将其覆盖在所有其他 div 块上。

当单击加号图标时，它还会在右侧显示一个 div 块。

正如您将在阻止时看到的2单击它会完成所有预期的操作。

我正在寻找一种有效的方法来做到这一点Angular单击任何加号图标时。

这只是我在这里展示的一个小示例，实际上需要覆盖 10 到 20 个区块。

如果有人能找到一种在这里使用更少代码并更好地利用范围的方法，我们将不胜感激。

我看过很多这样的选择在这里发帖 https://stackoverflow.com/questions/18871277/adding-multiple-class-using-ng-class.

尝试过这个，但它不想工作......

data-ng-class="{coverThisBlock: value2 == 'off',coverThisBlock: value == 'on'}"

如果我不得不使用这种类型的选项，哪怕是 10 个区块，那将是一个真正的混乱。

主要问题

有没有更好的 Angular 方法来实现这一点......当单击任何加号图标时，它会更改范围，然后由 ngclass 和 ng-show 使用？

如何正确连接此示例的范围？

非常感谢。

我已经建立了一个工作在这里小提琴 https://jsfiddle.net/AngularJR/2mu32g6k/.

这是最终的工作示例作者：阿维吉特·古普塔。

<div class="container" ng-app="plusMinusApp"  ng-controller="plusMinusController">

<div class="row" ng-init="value1 = 'off'">
 <!--<div class="col-xs-4" data-ng-class="{coverThisBlock: value2 == 'off',coverThisBlock: value == 'on'}"> --> 
    <div class="col-sm-4 col-xs-6" data-ng-class="{coverThisBlock: value2 == 'off'}">    
        <div class="divClass" 
        data-ng-click="(selectBlock(1)) ; (status1 = !status1) ; (value1 = { 'on': 'off', 'off':'on'}[value1])" 
        data-ng-class="{'active-selection': status1 == activeClass}">
        1
        </div>
        <i ng-click="(selectBlock(1)) ; (status1 = !status1) ; (value1 = { 'on': 'off', 'off':'on'}[value1])" 
        class="btn btn-primary text-center fa" 
        ng-class="{'fa-minus': status1, 'fa-plus': !status1}"></i>
    </div>
    <div  ng-show="value1 == 'on'" class="col-xs-4 textdiv">Hello</div>
</div>

<div class="row" >
    <div class="col-sm-4 col-xs-6" ng-init="value2 = 'on'">    
        <div class="divClass" 
        data-ng-click="(value2 = { 'on': 'off', 'off':'on'}[value2])" 
        data-ng-class="{'active-selection': value2 == 'off'}">
        2
        </div>
        <i ng-click="(value2 = { 'on': 'off', 'off':'on'}[value2])" 
        class="btn btn-primary text-center fa" 
        ng-class="{'fa-minus': (value2 == 'off'), 'fa-plus': value2}"></i>
    </div>
    <div  ng-show="value2 == 'off'" class="col-xs-3 textdiv">Hello</div>
</div>

<div class="row">  
    <div class="col-sm-4 col-xs-6" data-ng-class="{'coverThisBlock': value2 == 'off'}">    
        <div class="divClass" 
        data-ng-click="(selectBlock(3)) ; (status3 = !status3)" 
        data-ng-class="{'active-selection': !status3 == activeClass}">
        3
        </div>
        <i ng-click="(selectBlock(3)) ; (status3 = !status3)" 
        class="btn btn-primary text-center fa" 
        ng-class="{'fa-minus': status3, 'fa-plus': !status3}"></i>
    </div>
</div>

<div class="row"> 
    <div class="col-sm-4 col-xs-6" data-ng-class="{'coverThisBlock': value2 == 'off'}">    
        <div class="divClass" 
        data-ng-click="(selectBlock(1)) ; (status4 = !status4)" 
        data-ng-class="{'active-selection': status4 == activeClass}">
        4
        </div>
        <i ng-click="(selectBlock(1)) ; (status4 = !status4)" 
        class="btn btn-primary text-center fa" 
        ng-class="{'fa-minus': status4, 'fa-plus': !status4}"></i>
    </div>
    <div  ng-show="status4" class="col-xs-4 textdiv">Hello</div>   
</div>

<div class="row" ng-init="value = 'off'">
    <div class="col-sm-4 col-xs-6" data-ng-class="{'coverThisBlock': value2 == 'off'}">    
        <div class="divClass" 
        data-ng-click="(selectBlock(1)) ; (status = !status) ; (value = { 'on': 'off', 'off':'on'}[value])" 
        data-ng-class="{'active-selection': status == activeClass}">
        5
        </div>
        <i ng-click="(selectBlock(1)) ; (status = !status) ; (value = { 'on': 'off', 'off':'on'}[value])" 
        class="btn btn-primary text-center fa" 
        ng-class="{'fa-minus': status, 'fa-plus': !status}"></i>
    </div>
    <div  ng-show="value == 'on'" class="col-xs-4 textdiv">Hello</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/plusMinusApp.j"></script>
<script>

var myModule = angular.module('plusMinusApp', []);
myModule.controller('plusMinusController', function ($scope) {

    $scope.status  = false;    
    $scope.status1 = false;
    $scope.status2 = false;
    $scope.status3 = false;
    $scope.status4 = false;    

$scope.blocks = [{
    id: '1',
    block: "1",
  }, {
    id: '2',
    block: "2",
  }, {
    id: '3',
    block: "3",
  }, {
    id: '4',
    block: "4",
  }, {
    id: '5',
    block: "5"
  }];
 // $scope.activeClass = 0;  
  $scope.selectBlock = function(id) {
    $scope.activeClass = id;
    console.log(id);
  };  
});    
</script>  

回答与 NG-REPEAT 有关的问题

ng-repeat 可以为每个不同的 div 使用多个 css 类吗

显然可以。

通过使用范围id像这样...

<div class="block-{{block.id}}">

和这样的CSS...

.block-1 {...

这里的工作小提琴 https://jsfiddle.net/AngularJR/jqumnksx/

编辑（根据提问者的评论）:

更新的小提琴 https://jsfiddle.net/yyyn5ejg/60/

1. 一次只能点击一个吗？或者，如果另一个打开/单击，第一个打开的将被重置并关闭

这将您的代码简化了近 2 倍。

初始状态：

• 没有选择任何块。
• 没有任何块被覆盖。

Code:

$scope.setToInitialState = function() {
  $scope.blocks.forEach(function(block) {
    $scope.isSelected[block.id] = false;
    $scope.isCovered[block.id] =  false;
  });
};

触摸状态：

• 切换单击块的选定状态。 （在选择和取消选择之间切换）。
• 如果选择，则覆盖并取消选择所有其他块。
• 如果取消选择，则将应用程序置于初始状态。

Code:

$scope.selectBlock = function(id) {
  $scope.isSelected[id] = !$scope.isSelected[id];
  $scope.isCovered[id] = false;
  if ($scope.isSelected[id]) {
    $scope.blocks.forEach(function(block) {
      if (block.id !== id) {
        $scope.isCovered[block.id] = true;
        $scope.isSelected[block.id] = false;
      }    
    });
  }
  else {
    $scope.setToInitialState();
  }
};

2. 该演示使用所有相同的设置块大小，但实际使用所有 div 块的高度和宽度不同。每个块都是不同的图像

你应该考虑使用ng-src https://docs.angularjs.org/api/ng/directive/ngSrc.

我假设您可能会从数据库检索所有这些内容。然后，如果可能的话，您可以将每个图像放置在固定大小的 div 中，以便它们都具有相同的大小。

3. 另外，显示屏分为 2 个垂直半屏部分

可以通过稍微调整 css 来设置。

原答案:

工作小提琴 https://jsfiddle.net/yyyn5ejg/46/

假设您的应用程序有 2 个状态：

1. 初始状态（未触及）
2. 触摸状态

最初，您处于初始状态：

• 没有显示正确的 div。
• 所有图标均为“加号”（无“减号”）
• 没有任何块被覆盖。

Code:

$scope.setToInitialState = function() {
  $scope.plusCount = 0;
  $scope.blocks.forEach(function(block) {
    $scope.isPlus[block.id] = true;
    $scope.isShowDiv[block.id] = false;
    $scope.isCoverBlock[block.id] = false;
    $scope.plusCount += 1;
  });
};

当您处于 Touched 状态时：

• 所有这些块都被覆盖，其中有一个“加号”图标。
• 仅显示那些块的右侧 div，未覆盖这些块。

Code:

// Run when user clicks on the 'plus' or 'minus' icon.
$scope.selectBlock = function(id) {
  $scope.isPlus[id] = !$scope.isPlus[id]; // toggle between 'plus' and 'minus' icons
  if ($scope.isPlus[id]) {
    $scope.plusCount += 1;
  }
  else {
    $scope.plusCount -= 1;
  }
  $scope.blocks.forEach(function(block) {

    if ($scope.isPlus[block.id]) {
      $scope.isCoverBlock[block.id] = true;
    }
    else {    
      $scope.isCoverBlock[block.id] = false;
    }
    $scope.isShowDiv[block.id] = !$scope.isCoverBlock[block.id];

  });
};

因此，基本上当用户与视图交互并实际单击图标时，他/她就会转到touched state（以上代码已运行）。

仅当所有图标均为“加号”时，才必须将用户发送至initial state:

if ($scope.plusCount === $scope.blocks.length) {
  $scope.setToInitialState();
}

html 的变化:

1. Add ng-init="setToInitialState()"到最外面的div，这样我们一开始就处于初始状态。

Code:

<div class="container" ng-app="plusMinusApp"  ng-controller="plusMinusController" ng-init="setToInitialState()">

2. Use ng-repeat https://docs.angularjs.org/api/ng/directive/ngRepeat而不是为每个块复制粘贴代码：

Code:

<div class="row" ng-repeat="block in blocks">
    <div class="col-sm-4 col-xs-6" data-ng-class="{ 'coverThisBlock': isCoverBlock[block.id]}">    
        <div class="divClass" 
        data-ng-class="{'active-selection': !isPlus[block.id]}">
        {{block.id}}
        </div>
        <i data-ng-click="selectBlock(block.id)" 
        class="btn btn-primary text-center fa" 
        data-ng-class="{'fa-minus': !isPlus[block.id], 'fa-plus': isPlus[block.id]}"></i>
    </div>
    <div data-ng-show="isShowDiv[block.id]" class="col-xs-3 textdiv">Hello</div>
</div>

希望对您有帮助！