角度范围和ng-click/ng-show设置多个div [英] Angular scope and ng-click / ng-show to set multiple divs
问题描述
我正在寻找到目前为止我的代码方面的帮助.
I am looking for some help with my code I have so far.
主要目的是能够单击任何加号图标,并将其盖在所有其他div块上.
The main objective is to be able to click on any Plus icon and have it place a cover over all other div blocks.
当单击加号图标时,它还将在右侧显示一个div块.
And when a plus icon is clicked it will also show a div block to the right.
正如您将看到的那样,单击块 2 时,它会完成所有预期的工作.
As you will see when block 2 is clicked it does all that is intended.
我正在寻找一种有效的方法,当单击任何加号图标时,可以使用 Angular 进行此操作.
I am looking for an efficient way to do this with Angular when any plus icon is clicked.
这只是我在这里显示的一个小样本,实际上有10到20个块可以覆盖.
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'}"
如果我不得不使用这种类型的选项(甚至说10个区块),那将是一团糟.
If I had to use this type of option with even say 10 blocks, it would be a real mess.
主要问题
是否有更好的Angular方式可以工作...单击任何加号图标时,它会更改范围,然后供ngclass和ng-show使用?
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?
非常感谢.
我已经建立了一个可正常运行的 此处找到 .
I have set up a working FIDDLE HERE.
这里是最终的示例,作者是Avijit Gupta.
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>
回答有关NG-REPEAT的问题
ng-repeat可以为每个不同的div使用多个CSS类
显然可以.
像这样使用范围 id ...
By using the scope id like this...
<div class="block-{{block.id}}">
和这样的CSS ...
and the css like this...
.block-1 {...
WORKING FIDDLE OF THIS HERE
推荐答案
编辑(基于提问者的评论):
- 一次只能单击一个?或者,如果另一个打开/单击,则第一个打开的将重置并关闭
这将您的代码简化了近两倍.
This simplifies your code by almost 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
.
You should consider using ng-src
.
我假设您可能正在从数据库中检索所有这些内容.然后,如果可能,您可以将每个图像放置在固定大小的div内,以使它们的大小都相同.
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.
- 此外,显示屏还分为2个垂直半屏部分
可以通过调整一点CSS来正确设置.
That can be set right tweaking a little bit of css.
原始答案:
假设您的应用有2种状态:
Let's say your app has 2 states:
- 初始状态(未更改)
- 触摸状态
最初,您处于初始状态:
Initially, you are in the Initial state:
- 没有显示正确的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
(运行上面的代码).
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).
仅当所有图标均为加号"时,才必须将用户发送到initial state
:
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();
}
HTML中的更改:
- 将
ng-init="setToInitialState()"
添加到最外面的div,以便我们最初处于初始状态.
- Add
ng-init="setToInitialState()"
to the outermost div, so that we are in the initial state initially.
代码:
<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>
希望它对您有帮助!
这篇关于角度范围和ng-click/ng-show设置多个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!