AngularJS基础——样式指令、DOM操作指令及其它重要指令

本文链接：https://blog.youkuaiyun.com/bboyjoe/article/details/50443058

本文深入探讨AngularJS的样式指令、DOM操作指令、重要指令及其实际应用，包括ng-class、ng-styling、ng-href、ng-src、ng-if、ng-show等，并展示了如何使用ng-bind、ng-bind-template、ng-bind-html、ng-include等功能，通过实例代码直观呈现AngularJS的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS的样式指令：

ng-class
ng-style
ng-href
ng-src
ng-attr-(suffix)

AngularJS的DOM操作指令：

ng-if
ng-show / ng-hide
ng-switch
ng-open

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
    <style>
        .red{
            color:#01C5FF;
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstCtrl">
        <div ng-cloak ng-class="{red:t}">{{info}}</div>
        <div ng-cloak ng-class="{{tClass}}">{{info}}</div>
        <div ng-cloak ng-style="{color:'red'}">{{info}}</div>
        <div ng-cloak ng-style="{{style}}">{{info}}</div>
        <a ng-href="{{url}}">百度</a><br/>
        <img ng-src="{{src}}" alt="百度logo" width="100"/><br/>
        <img ng-src="{{src}}" alt="百度logo" width="100" ng-attr-title="{{info}}"/>
        <div ng-show="t">显示</div>
        <div ng-if="t">显示/隐藏</div>
        <div ng-switch on="t">
            <p ng-switch-default>默认效果</p>
            <p ng-switch-when="false">false切换效果</p>
            <p ng-switch-when="true">true切换效果</p>
        </div>

        <input type="checkbox" ng-model="open"><br/>
        <details id="details" ng-open="open">
            <summary>Copyright 2011.</summary>
            <p>All pages and graphics on this web site are the property of W3School.</p>
        </details>
    </div>

</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',[]);
    myApp.controller('firstCtrl',function($scope){
        $scope.info="实景去发现";
        $scope.t=true;
        $scope.tClass="{red:true,yellow:true}";
        $scope.style="{color:'red',background:'blue'}";
        $scope.url="http://www.baidu.com";
        $scope.src="http://www.baidu.com/img/bdlogo.png";
    });

</script>
</body>
</html>

AngularJS的其它重要指令

ng-bind:显示数据类似于 {{}}
ng-bind-template: 解决ng-bind中只能解决绑定一个的问题
ng-bind-html:解析html代码
ng-include:加载外部页面

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>

</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstCtrl">
        <div ng-bind="info"></div>
        <div ng-bind-template="{{info}} {{message}}"></div>
        <div ng-bind-html="h2"></div>
    </div>

</div>
<script src="angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',['ngSanitize']);
    myApp.controller('firstCtrl',function($scope){
        $scope.info="实景去发现";
        $scope.message="现在就下载"
        $scope.h2="<h2>有来</h2>";
    });

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>

</head>
<body>
<div ng-app="myApp">
    <div ng-controller="ExampleController">
        <select ng-model="template" ng-options="t.name for t in templates">
            <option value="">(blank)</option>
        </select>
        url of the template: <tt>{{template.url}}</tt>
        <hr/>
        <div class="slide-animate-container">
            <div class="slide-animate" ng-include="template.url"></div>
        </div>


        <div ng-include="tpl"></div>
        <div ng-include src="tpl2"></div>

        <!--另一种加载页面的方式:ionic常用-->
        <script type="text/ng-template" id="tpl.html">
            Content of the template.111111111111
        </script>
        <script type="text/ng-template" id="tpl2.html">
            Content of the template.2222222222
        </script>
    </div>

</div>
<script src="angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',['ngSanitize']);
    myApp.controller('ExampleController', ['$scope', function($scope) {
        $scope.templates =
                [ { name: 'template1.html', url: 'template1.html'},
                    { name: 'template2.html', url: 'template2.html'} ];
        $scope.template = $scope.templates[0];

        $scope.tpl = 'tpl.html';
        $scope.tpl2 = 'tpl2.html';

    }]);
</script>
</body>
</html>

ng-init
ng-mode-options

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>

</head>
<body>
<div ng-app="myApp">
    <div ng-controller="ExampleController">
        <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
            <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
                <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
            </div>
        </div>
    </div>

    <div ng-controller="ExampleController2">
        <form name="userForm">
            Name:
            <input type="text" name="userName"
                   ng-model="user.name"
                   ng-model-options="{ updateOn: 'blur' }"
                   ng-keyup="cancel($event)" /><br />

            Other data:
            <input type="text" ng-model="user.data" /><br />
        </form>
        <pre>user.name = <span ng-bind="user.name"></span></pre>
    </div>

</div>
<script src="angular.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',['ngSanitize']);
    myApp.controller('ExampleController', ['$scope', function($scope) {
        $scope.list = [['a', 'b'], ['c', 'd']];
    }]);

</script>

</body>
</html>

更多细节可查看API文档：http://docs.angularjs.cn/api