Angular scope and ng-click / ng-show for setting multiple divs

Question

Angular scope and ng-click / ng-show for setting multiple divs

I am looking for some help with my code, which I still have.

The main goal is to be able to click on any Plus icon and place it on top of all other div blocks.

And when you click the plus sign, it will also show the div block on the right.

As you will see when you press block 2 , it does everything that is intended.

I am looking for an effective way to do this with Angular when clicking on any plus sign.

This is just a small sample that I show here, in fact, there will be 10 to 20 blocks for coverage.

If someone can see a way to use less code here and use a scope better, that would be quite helpful.

I looked through many options, for example, here is the message .

Tried this, but he doesn’t want to work ...

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

If I had to use this type of option, even say 10 blocks, that would be a real mess.

Main questions

Is there a better Angular way for this to work ... when you click any plus sign, it changes the area so that ngclass and ng-show can then be used?

How to connect the scope for this example?

Many thanks.

I created a working FIDDLE HERE .

HERE A FINAL WORKING EXAMPLE Avizhit Gupta.

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

ANSWER THE QUESTION TO DO WITH AN UNINTERRUPTED

Can ng-repeat use multiple CSS classes for each different div

Apparently this is possible.

Using an id scope like this ...

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

and css like this ...

.block-1 {...

+4

angularjs angularjs-scope ng-class angularjs-ng-click ng-show

AngularJR 30 . '15 4:54

3

UPDATE

, . ... , , .

, - JS. , .

this.blocks = Array.apply(null, Array(10)).map(function (val, index) {return index;});

this.activeIndex = null;

this.isActive = function(index) {
    return that.activeIndex === index;
};

this.hasSelected = function() {
    return that.activeIndex !== null;
};

this.selectBlock = function(index) {

    if (that.activeIndex === index) {
        that.activeIndex = null;
    } else {
        that.activeIndex = index;
    }

};

, JS , ( ).

( , , , .)

, , , / .

$scope. controller as. , JS this.prop HTML, myCtrlAs.prop. Docs
CSS. :not()

: KISS DRY

, . @avijit , ng-repeat.

<div class="row" ng-repeat="block in plusMinus.blocks track by $index">
    //This entire block will be repeated
</div>

, . KISS, , , - .

.

  //each element represents the state of a row
  this.blocks = [0,0,0,0,0];

, ng-repeat.

, , ?

, ...

, , blocks. , , ""? , . , .

( , , , .)

, , :

this.hasSelected = function() {
  return that.blocks.indexOf(true) !== -1;
};

? ! , "" , .

CSS-it fun!

, .has-selected .

"" , .has-selected,

has-selected :not(.active) > .col-sm-4 {
  width: 33%;
  height: inherit;
  background-color: rgba(00,00,00,0.8);
  z-index: 9;
}
.has-selected :not(.active) .col-sm-4 {
  @media (max-width:420px){
    width: 80%;
  }
}

`ng-repeat`

, , $index HTML ng-repeat. (Docs SO-

<div class="label-index" data-ng-class="{'active-selection': !plusMinus.isActive($index)}">
          {{$index}}
</div>

.
, - , .

, , - . , .

+3

jasonszhao 02 . '15 1:30

,

angular.module('plusMinusApp', [])
	.controller('plusMinusController', function ($scope) {
		$scope.blocks = [1, 2, 3, 4, 5, 6];
		var expandedBlock;
		
		$scope.isAnyBlockExpanded = function() {
			return expandedBlock !== undefined;
		};
		
		$scope.isBlockExpanded = function(blockId) {
			return expandedBlock === blockId;
		};
		
		$scope.toggleBlockExpandingStatus = function(blockId) {
			expandedBlock = $scope.isBlockExpanded(blockId) ? undefined : blockId;
		}; 
	});

body {
    padding-top: 15px;
}

.divClass{
    width: 35%;
    height:50px;
    text-align:center;
    line-height:50px;
    float: left;
    left:15px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-right: 15px;
    color: orange;
    font-size: 18px;
    border:2px solid #000; 
    background-color: rgba(00,00,00,0.6);
    cursor: pointer;
}

.textdiv {
    border:2px solid green; 
    background-color: rgba(100,100,100,0.1);
    height:50px;
    text-align:center;
    line-height:50px;
    margin-top: 25px;
	display: none;
}

.expanded-block  .textdiv {
	display: block;
}

i {
    color:#000;
    font-size: 40px;
    line-height:50px;
}

.btn {
    height: 50px;
    margin-top: 25px;
    margin-left: 15px;
}
 
.expanded-block  .divClass {
    background-color:rgba(100,100,100,0.1);
    width: 35%;
    font-size: 40px;
    text-align: center;
    border:2px solid green; 
}

.collapsed-block .block-item {
    width: 33%;
    height: inherit;
    background-color: rgba(00,00,00,0.8);
    z-index: 9;
}

@media (max-width:420px){
	.collapsed-block {
		width: 80%;
	}
}

<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

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

		<div ng-repeat="block in blocks" class="row" ng-class="{'collapsed-block': isAnyBlockExpanded() && !isBlockExpanded(block), 'expanded-block': isBlockExpanded(block)}">
			<div class="col-sm-4 col-xs-6 block-item">    
				<div class="divClass" ng-click="toggleBlockExpandingStatus(block)">{{block}}</div>
				<i ng-click="toggleBlockExpandingStatus(block)" class="btn btn-primary text-center fa" ng-class="isBlockExpanded(block) ? 'fa-minus': 'fa-plus'"></i>
			</div>
			<div class="col-xs-4 textdiv">Hello</div>
		</div>
		
	</div>
</body>
</html>

Hide result

+1

Alexander Elgin 02 . '15 10:40

Avijit Gupta · Accepted Answer · 2016-01-01T14:49:00+0000

( ):

FIDDLE

? , /, reset

2x.

:

.
.

:

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

:

. ( ).
, .
, .

:

$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();
  }
};

, div . -

ng-src.

, . , , div , .

,

css.

:

, 2 :

()

:

div.
"" ( "" )
.

:

$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;
  });
};

"":

, "" .
div , .

:

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

ng-init="setToInitialState()" div, .

:

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

ng-repeat :

:

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

, !

Angular scope and ng-click / ng-show for setting multiple divs

UPDATE

: KISS DRY

CSS-it fun!

ng-repeat

More articles:

`ng-repeat`