【AnjularJS系列1 】— 样式相关的指令

最近，开始学习AngularJS。

开始记录学习AngularJS的过程，从一些很简单的知识点开始。

习惯先从实际应用的指令开始，再从应用中去体会AngularJS的优缺点、使用的场景等。

之前一直希望能在学的过程中，逐步写出一个有设计感的web页面成果，

但发现，有点困难，反而在样式等花的时间多，学AngularJS的时间少了。

所以最后决定写一些简单的范例就可以了

第一篇，样式相关的指令。

1. 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>