同事,为了清楚起见,有这样一个例子
[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
s.addEventListener('click', function() {
[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
arr[i].classList.remove('li-example-active');
})
arr[i].classList.add('li-example-active');
})
})
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 20px;
letter-spacing: 3px;
}
li.li-example-active{
background-color: #00c;
}
<menu class="example">
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
</menu>
我认为没有必要解释上面示例中发生的事情。
我想知道如何在*Angular-1*
我的尝试...
const app = angular.module('app', []);
app.directive('example', function() {
return {
restrict: "C",
link: function(scope, element, attrs) {
scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
}
}
});
app.directive('liExample', function() {
return {
restrict: "C",
link: function(scope, element, attrs) {
//element.addClass('li-example-active'); Почему данный вариант **JQUERY** за пределами цикла forEach работает
angular.forEach(element, i => {
scope.functionClick = function() {
i.classList.add('li-example-active'); // хотя прекрасно работает класический вариант js добавления и удаления *class*
//i.addClass('li-example-active');// а в цикле не работает
}
})
}
}
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
max-width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 2.5vmax;
letter-spacing: 3px;
}
li.li-example-active {
background-color: #00c;
}
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
<li class="li-example" ng-repeat="example in myExample" ng-click="functionClick()"><span>{{example}}</span></li>
</menu>
<html>
以及如何在这个版本中实现这个例子,就像在 JS 的第一个经典版本中一样????这样被点击的元素被分配了类li-example-active
,其余的被删除了类li-example-active
???
另外我想问一下我是否理解正确,没有angular.forEach(element, i => {})
像经典版本的js那样的三个参数`Array.forEach((s,i,arr)=> {})`,而是一个?
还有一个类似示例的变体,具有不同的实现,也有问题
const app = angular.module('app', []);
app.directive('example', function() {
return {
restrict: "C",
link: function(scope, element, attrs) {
scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
}
}
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
max-width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 2.5vmax;
letter-spacing: 3px;
}
li.li-example-active {
background-color: #00c;
}
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
<li class="li-example" ng-repeat="example in myExample" ng-click="active = !active" ng-class="active ? '' : 'li-example-active'"><span>{{example}}</span></li>
</menu>
<html>
问题是一样的......以及如何在这个版本中实现这个例子就像在JS的第一个经典版本中一样????
而且这个例子不是很重要,那么简单,对于一般的开发....
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
max-width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 2.5vmax;
letter-spacing: 3px;
}
li.li-example span {
background-color: green;
}
li.li-example span.span-active {
background-color: blue;
}
<html ng-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
<li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
<li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
<li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
<li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
<li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
</menu>
<html>
问题....为什么在这个变体中没有ng-repeat
class="span-active"
接收所有元素Span
,而不是其父被点击的那个....
使用 Angular 时,最好从数据开始,而不是从标记开始。
这种情况下的问题是,从数据端来看,只有一个数组,并且无法以任何方式确定究竟选择了什么,因此尝试使用 DOM 元素来计算它。
selected
相反,添加一个字段并将所选元素的索引存储在其中就足够了。进一步,ng-repeat
只需检查当前index
和选定的,如果它们匹配,设置类。标准指令就足够了ng-class
。结果是以下代码:
不,不正确。具体定义可以看帮助
范围的问题:
ng-repeat
- 创建自己的范围,因此,在每次迭代中,每个元素都有自己的属性active
,因此它们彼此独立变化。该错误与前一个相反:由于每个元素没有单独的范围,因此
active
所有元素都有一个,这会影响结果。