我们的想法是创建一个 list 。当用户单击圆圈时,它会更改其背景颜色。如果他再次点击它,它应该会重置颜色。
当用户这样检查他的进度时,我设法将背景更改为绿色:
<i class="circle1"
ng-style="myStyle1"
ng-click="myStyle1={'background-color':'green'}">1</i>
现在我的问题是如何在用户再次点击时将颜色重置为白色?
感谢您的帮助。
最佳答案
一种选择是引入一个 css 类,当您单击该元素时,该类会切换。您可以结合使用 ng-class
和使用 ng-click
来切换变量。
<i class="circle1" ng-class="{'green-circle': isToggled === true}" ng-click="isToggled = !isToggled">1 - {{isToggled}}</i>
angular.module("app", []);
.circle1 {
background: red;
}
.green-circle {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<i class="circle1" ng-class="{'green-circle': isToggled === true}" ng-click="isToggled = !isToggled">1 - {{isToggled}}</i>
</div>
此解决方案的缺点是您需要为每个圆圈设置不同的 isToggled
变量。一个更好、更可重用的解决方案是创建一个指令来处理这个问题:
var app = angular.module("app", []);
app.directive('toggleClass', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function() {
element.toggleClass(attrs.toggleClass);
});
}
};
});
.circle1 {
background: red;
}
.green-circle {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<i class="circle1" toggle-class="green-circle">One</i>
<i class="circle1" toggle-class="green-circle">Two</i>
<i class="circle1" toggle-class="green-circle">Three</i>
</div>
关于javascript - ng-click 以撤消事件 AngularJs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37660919/