- 首页
- 其他开发
- 角度范围和 ng-click/ng-show 设置多个 div
角度范围和 ng-click/ng-show 设置多个 div
[英] Angular scope and ng-click / ng-show to set multiple divs
本文介绍了角度范围和 ng-click/ng-show 设置多个 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻求有关我目前所拥有的代码的帮助.
主要目标是能够点击任何加号图标并让它覆盖所有其他 div 块.
当点击加号图标时，它还会在右侧显示一个 div 块.
正如您将看到的，当块 2 被点击时，它会完成所有预期的工作.
我正在寻找一种在单击任何加号图标时使用 Angular 执行此操作的有效方法.
这只是我在这里展示的一个小样本，实际上需要覆盖 10 到 20 个块.
如果有人能在这里看到一种使用更少代码并更好地利用范围的方法，我们将不胜感激.
我查看了许多选项，例如在此
这是最终的工作示例，作者是 Avijit Gupta.
<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
<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 ng-show="value1 == 'on'" class="col-xs-4 textdiv">你好</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
<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 ng-show="value2 == 'off'" class="col-xs-3 textdiv">你好</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
<i ng-click="(selectBlock(3)) ; (status3 = !status3)"class="btn btn-primary text-center fa"ng-class="{'fa-minus': status3, 'fa-plus': !status3}"></i>
<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
<i ng-click="(selectBlock(1)) ; (status4 = !status4)"class="btn btn-primary text-center fa"ng-class="{'fa-minus': status4, 'fa-plus': !status4}"></i>
<div ng-show="status4" class="col-xs-4 textdiv">你好</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
<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 ng-show="value == 'on'" class="col-xs-4 textdiv">你好</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><script src="js/plusMinusApp.j"></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 = [{编号:'1'，块:1"，}, {编号:'2'，块:2"，}, {编号:'3'，块:3"，}, {编号:'4'，块:4"，}, {编号:'5'，块:5"}];//$scope.activeClass = 0;$scope.selectBlock = function(id) {$scope.activeClass = id;控制台日志(ID)；};});
回答有关 NG-REPEAT 的问题
ng-repeat 可以为每个不同的 div 使用多个 css 类
显然可以.
像这样使用范围 id...
和这样的css...
.block-1 {...
在这里工作
解决方案
编辑(基于提问者的评论):
更新的小提琴
- 一次只能点击一个?或者，如果另一个打开/点击，第一个打开的将重置并关闭
这将您的代码简化了近 2 倍.
初始状态:
代码:
$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;如果($scope.isSelected[id]){$scope.blocks.forEach(function(block) {if (block.id !== id) {$scope.isCovered[block.id] = true;$scope.isSelected[block.id] = false;}});}别的 {$scope.setToInitialState();}};
- demo 使用了所有相同的设置块大小，但实际使用的所有 div 块都是不同的高度和宽度.每个块都是不同的图像
您应该考虑使用 ng-src.
我假设您可能正在从数据库中检索所有这些内容.然后，如果可能，您可以将每个图像放在一个固定大小的 div 中，以便它们都具有相同的大小.
- 此外，显示屏分为 2 个垂直的半屏部分
可以通过稍微调整一下 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.
代码:
//当用户点击加号"或减号"图标时运行.$scope.selectBlock = function(id) {$scope.isPlus[id] = !$scope.isPlus[id];//在加号"和减号"图标之间切换如果($scope.isPlus[id]){$scope.plusCount += 1;}别的 {$scope.plusCount -= 1;}$scope.blocks.forEach(function(block) {如果($scope.isPlus[block.id]){$scope.isCoverBlock[block.id] = true;}别的 {$scope.isCoverBlock[block.id] = false;}$scope.isShowDiv[block.id] = !$scope.isCoverBlock[block.id];});};
所以，基本上当用户与视图交互并实际点击图标时，他/她就会进入touched state(运行上面的代码).
只有当所有图标都是'加号'时，用户才必须进入初始状态:
if ($scope.plusCount === $scope.blocks.length) {$scope.setToInitialState();}
html 中的变化:
- 在最外层的div添加
ng-init="setToInitialState()"，这样我们就处于初始状态.
代码:
- 使用
ng-repeat 而不是复制- 为每个块粘贴代码:
代码:
<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}}
<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 data-ng-show="isShowDiv[block.id]" class="col-xs-3 textdiv">你好</div>
希望对你有帮助！
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
解决方案
EDIT (Based on asker's comment):
UPDATED FIDDLE
- 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();
}
};
- 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.
- 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:
- Initial state (untouched)
- 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:
- 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()">
- 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!
这篇关于角度范围和 ng-click/ng-show 设置多个 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
