正文
AnjularJS系列1 —— 样式相关的指令
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
最近，开始学习AngularJS。
开始记录学习AngularJS的过程，从一些很简单的知识点开始。
习惯先从实际应用的指令开始，再从应用中去体会AngularJS的优缺点、使用的场景等。
之前一直希望能在学的过程中，逐步写出一个有设计感的web页面成果，
但发现，有点困难，反而在样式等花的时间多，学AngularJS的时间少了。
所以最后决定写一些简单的范例就可以了
第一篇，样式相关的指令。
ng-Class
在angularJS中可利用一下三种方法操作class:
A、scope变量绑定
这里为class，不能用ng-class
实现功能：设置字体大小
<div class="{{means_1}}">scope变量绑定（不建议使用）</div>
<script type="text/javascript">
var app = angular.module('MyDemo', []);
app.controller('MyCtrl',function($scope) {
$scope.means_1="class_1";
});
</script>
B、字符串数组形式：
boolclass=true 则显示 class_true 的样式
boolclass=false则显示class_false的样式
功能实现：点击【样式切换】可切换字体样式
<div ng-class="{true:'class_true',false:'class_false'}[boolclass]">字符串数组形式</div>
<input type="button" value="样式切换" ng-click="changeclass();" name="">
<script type="text/javascript">
var app = angular.module('MyDemo', []);
app.controller('MyCtrl',function($scope) {
$scope.boolclass=false;
$scope.changeclass=function(){
var name=$scope.boolclass;
var change=name==false?true:false;
$scope.boolclass=change;
};
});
</script>
C、对象key/value处理
class_error、class_warn：样式
error、warning：变量
error为True则增加class_error样式，为false则删除class_error样式，warning同理
功能实现：点击【增/删错误样式】可增/删字体的错误样式，点击【增/删警告样式】可增/删字体的警告样式
<strong>第三种方式：</strong>
<div ng-class="{class_error:error,class_warn:warning}">对象key/value处理</div>
<div><input type="button" value="增/删错误样式" ng-click="AddError();" name="">
<input type="button" value="增/删警告样式" ng-click="AddWarn();" name=""></div>
<script type="text/javascript">
var app = angular.module('MyDemo', []);
app.controller('MyCtrl',function($scope) {
$scope.error=false;
$scope.warning=false;
$scope.AddError=function(){
var name=$scope.error;
var change=(name==false?true:false);
$scope.error=change;
};
$scope.AddWarn=function(){
var name=$scope.warning;
var change=(name==false?true:false);
$scope.warning=change;
};
});</script>
2、ng-class-odd、ng-class-even
使用方式与ng-class相似，分别是在奇数列和偶数列对应的类，与ng-repeat配合使用
功能实现：点击【样式切换】可切换奇偶行样式
<strong>ng-class-odd、ng-class-even</strong>
<table>
<tr ng-repeat="x in records" ng-class-odd="{true:'class_true',false:'class_false'}[boolclass]"
ng-class-even="{false:'class_true',true:'class_false'}[boolclass]">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
<input type="button" value="样式切换" ng-click="changeclass();" name="">
<script type="text/javascript">
var app = angular.module('MyDemo', []);
app.controller('MyCtrl',function($scope) {
$scope.records = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbk",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
];
$scope.boolclass=false;
$scope.changeclass=function(){
var name=$scope.boolclass;
var change=(name==false?true:false);
$scope.boolclass=change;
};
});
</script>
3、ng-style
ng-style用来绑定元素的css样式，其表达式的返回值为一个js对象，键为css样式名
功能实现：设置字体样式
<strong>ng-style</strong>
<div ng-style="{color:'red'}">ng-style测试</div>
<div ng-style="style">ng-style测试</div>
var app = angular.module('MyDemo', []);
app.controller('MyCtrl',function($scope) {
$scope.style = {color:'blue'};
});
4、ng-show，ng-hide
ng-show和ng-hide的值为boolean类型的表达式，当值为true时，对应的show或hide生效。
功能实现：选中checkbox，显示字体
<strong>ng-show、ng-hide</strong>
前端技术显示: <input type="checkbox" ng-model="IsCheck">
<div ng-show="IsCheck">
<h1>Hello World！~</h1>
<p>js，angularjs，html，css，nodejs，jquery</p>
</div>
