2019-06-15_Angular_1.2.27动态样式设置
2019-06-15 本文已影响0人
kikop
Angular_1.2.27动态样式设置
1.概述
通过Angular,结合css样式,实现li数据的渲染，及下一级数据的动态样式切换。
具体参见第二节。
2.示例
2.1.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="resources/script/angular-1.2.32/angular.js"></script>
<style type="text/css">
li {
list-style: none;
}
.head {
background-color: green;
}
.defaultClass {
display: none;
}
.chosenClass {
display: block;
}
</style>
</head>
<body>
<div ng-controller="mycontroller">
<li ng-repeat="task in datas track by $index">
<div class="head" ng-click="showmsg($index)">{{task.name}}</div>
<div ng-class="{'defaultClass':($index !=chosedIndex),'chosenClass':($index==chosedIndex)}">11111111
</div>
<hr>
</li>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
2.2.js
/**
- Created by kikop on 2019/6/15.
*/
var ng = angular.module('app', []); // 定义模块
// 绑定控制器
ng.controller('mycontroller', ['scope) { // 代码压缩问题解决
var datas = [
{
"id": 1,
"name": "task1"
},
{
"id": 2,
"name": "task2"
}
];
$scope.datas = datas;
$scope.dynamicRowCSSSettings = dynamicRowCSSSettings;
$scope.chosedIndex = 0;
function dynamicRowCSSSettings(index) {
$scope.chosedIndex = index;
}
}]);
