1. 技术文章
  2. Angular scope and ng-click / ng-show to set multiple divs

Angular scope and ng-click / ng-show to set multiple divs

由 痞子三分冷 提交于 2019-12-06 02:09:24

问题


I am looking for some help with my code I have so far.

The main objective is to be able to click on any Plus icon and have it place a cover over all other div blocks.

And when a plus icon is clicked it will also show a div block to the right.

As you will see when block 2 is clicked it does all that is intended.

I am looking for an efficient way to do this with Angular when any plus icon is clicked.

This is just a small sample I show here, in reality there would be 10 to 20 blocks to cover.

If someone could see a way to use less code here and make better use of the scope, this would be greatly appreciated.

I have looked at many options like in this post here.

Tried this but it doesn't want to work... 

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

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

The main Questions

Is there a better Angular way for this to work... when any plus icon is clicked it changes scope to then be used by ngclass and ng-show?

How to correctly wire up scope for this example?

Many Thanks.

I have set up a working FIDDLE HERE.

HERE IS THE FINAL WORKING EXAMPLE by Avijit 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>

TO ANSWER THE QUESTION TO DO WITH NG-REPEAT

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

Apparently it can.

By using the scope id like this... 

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

and the css like this... 

.block-1 {...

WORKING FIDDLE OF THIS HERE


回答1:


EDIT (Based on asker's comment):

UPDATED FIDDLE

  1. only one can be clicked at a time? Or if another is open/clicked the first opened is reset and closed

This simplifies your code by almost 2x.

Initial State:

  • None of the blocks are selected.
  • None of the blocks are covered.

Code:

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

Touched State:

  • Toggle the selected state of the clicked block. (toggle between select and deselect).
  • If selected, then cover and deselect all the other blocks.
  • If deselected, then bring the app to the initial state.

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();
  }
};
  1. The demo uses all the same set block sizes, but the actual use all div Blocks are different heights and widths. And each block is a different image

You should consider using ng-src.

I am assuming that you might be retreiving all this content from the DB. Then, if possible, you may place each of your image inside a div of fixed size, so that they all come out to be of the same size.

  1. Plus the display is divided into 2 vertical half screen sections

That can be set right tweaking a little bit of css.

ORIGINAL ANSWER:

WORKING FIDDLE

Let's say your app has 2 states:

  1. Initial state (untouched)
  2. Touched state

Initially, you are in the Initial state:

  • No right divs are shown.
  • All the icons are 'plus' (no 'minus')
  • None of the blocks are covered.

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

When you are in the Touched state:

  • All those blocks are covered, which have a 'plus' icon.
  • The right divs of only those blocks are shown, which are not covered.

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

  });
};

So, basically when the user interacts with the view and actually clicks on the icon, then he/she goes to the touched state (the above code is run).

Only when all the icons are 'plus', then the user must be sent to the initial state:

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

Changes in html:

  1. Add ng-init="setToInitialState()" to the outermost div, so that we are in the initial state initially.

Code:

<div class="container" ng-app="plusMinusApp"  ng-controller="plusMinusController" ng-init="setToInitialState()">
  1. Use ng-repeat instead of copy-pasting code for each block:

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>

Hope it helps you!




回答2:


UPDATE

Shoot, it's only one at a time. Well... Almost all of what I had written applies.

New Fiddle

So only difference is the JS. Instead of an array of selected blocks, we have a number that represents the selected block.

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

};

See, good JS code is easily maintainable, even when the requirements change (or when I find out they do).

(We actually can get by without these helper functions, but we use them for the sake of prettier code and maybe encapsulation.)

Original Answer

Fiddle here

I hope I've explained why we should do the stuff in the fiddle, and gave credible references/further reading material.

First things first

  • Don't use $scope. I like controller as syntax. Basically, in JS, you use this.prop and HTML, you use myCtrlAs.prop. Docs
  • This is a CSS problem. Take advantage of :not()

Two principles: KISS and DRY

So we have a problem of same copy-pasted code blocks. Like @avijit said, you should use the ng-repeat directive. 

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

For each row, we need to keep track of whether or not it is selected. Following the KISS principle, the only state we need to keep track of is this.

Otherwise, things get too complex. 

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

So this block array is used for the ng-repeat.

You ask, how will we keep track of what to turn dark and what is active?

The answer, is .... wait for it


You don't


Instead, we use functions located on the controller to get information about the single blocks variable. You could argue against my wording, but notice how I said "keep track"? Again, don't store duplicate state data. It becomes a nightmare, based off my prior experience.

(We actually can get by without these helper functions, but we use them for the sake of prettier code and maybe encapsulation.)

So the first function that I want to point out:

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

What is this for? You guessed it! To determine if we should "cover up" the rows that aren't selected.

Use CSS–it's fun useful!

So we conditionally apply the .has-selected class to a wrapper.

So that the "cover" only applies when it has an ancestor with .has-selected, we have

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%;
  }
}

back to ng-repeat

Oh, and by now, you should know that $index is used to access the index of the current HTML in ng-repeat. (Docs and SO Thread

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

Concluding remarks

  • Read the docs
  • Don't try to do everything with one tool
  • If you think I didn't explain something particularly well, just ask.

Also, I think I screwed up some styling. I hope that you can fix it on your own.




回答3:


the best solution you can find in the snippet below

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>


来源：https://stackoverflow.com/questions/34523109/angular-scope-and-ng-click-ng-show-to-set-multiple-divs

标签
angularjs
angularjs-scope
angularjs-ng-click
ng-class
ng-show
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!