用angularjs写,点击盒子变色其他盒子恢复原色
2015-11-06 16:09
711 查看
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> <script type="text/javascript" src="angular.min.js"></script> <script> var myApp = angular.module("myApp", []); myApp.controller("testCtrl", function($scope){ $scope.data = [0,1,2,3,4]; $scope.isCurrent = function(index){ $scope.bg = []; $scope.bg[index] = 'current'; } }); </script> <style> ul { margin:100px auto; width:1120px; <a href="https://www.baidu.com/s?wd=list-style&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PyuWuH-hn1IbPWI9PyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1mkP161PWmsPW6Lrj0knHR1n6" target="_blank" class="baidu-highlight">list-style</a>:none} ul li { display:block; width:200px; height:200px; background:#efefef; border:solid 1px #000; float:left; margin:10px; cursor:pointer} .current { background:#f00} </style> </head> <body ng-app="myApp"> <ul ng-controller="testCtrl"> <li ng-repeat="item in data" ng-class="bg[$index]" ng-click="isCurrent($index)"></li> </ul> </body> </html>
上面的写复杂了,
html:
<li ng-repeat="item in data" ng-class="{activedClass:$index==activerow}" ng-click="isCurrent($index)"></li>js:
$scope.activerow=0; //默认第一个项目加上class
$scope.isCurrent = function(index){<span style="white-space:pre"> </span><pre name="code" class="javascript">$scope.activerow = index;}
相关文章推荐
- AngularJS中 ng-select 实例
- AngularJS 1.2.x 学习笔记(表单校验篇)
- AngularJS 学习笔记(表单校验篇) 示例
- AngularJS 参考手册
- [Angular 2] Validation
- [Angular 2] ng-control & ng-control-group
- [Angular 2] NgNonBindable
- angular 指令简述
- ionic工程组织文件
- AngularJS API之$injector ---- 依赖注入
- angularjs初窥门径
- AngularJs ngChange、ngChecked、ngClick、ngDblclick
- AngularJS 最常用的八种功能
- $resource 数据交互插件
- angularjs ngSanitize ngRoute ngAnimate 插件
- Angularjs 自定义服务 provide 里 provider 方法 以及 factory、 service 方法以及 provider 供应商的概念
- Angularjs filter 过滤器以及自定义 filter 过滤器详解
- Angularjs 事件指令 input 相关指令 和样式指令 DOM 操作指令详解
- Angularjs 工具方法 以及 Angularjs 中使用 jquery
- angularjs学习笔记【不定期更新】