1-5.Angular指令概念

  • HTML在构建应用(App)时存在诸多不足之处,AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷,

  • 所谓指令就是AngularJS自定义的HTML属性或标签,这些指令都是以ng-做为前缀的,例如ng-app、ng-controller、ng-repeat等。

  • 内置指令:

    • ng-app 指定应用根元素,至少有一个
    • ng-controller 指定控制器
    • ng-show 控制器元素是否显示, true显示、false不显示
    • ng-hide控制元素是否隐藏,true隐藏、false不隐藏
    • ng-if控制元素是否“存在”,true存在、false不存在
    • ng-src增强图片路径
    • ng-href增强地址
    • ng-class控制类名
    • ng-include引入模板
    • ng-disabled表单禁用
    • ng-readonly表单只读
    • ng-checked单/复选框表单选中
    • ng-selected下拉框表单选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script src="js/angular.js"></script>
<script>
    //1.创建模块
    var app = angular.module('app', []);
    //2.创建控制器
    app.controller('xmgController', ['$scope', function ($scope) {
        $scope.name = "p标签 p标签";
        $scope.msg = "h1标签";
        $scope.course = ['html', 'css', 'js'];

        $scope.stu = [
            {name:'zs', no:'11'},
            {name:'ls', no:'22'},
            {name:'wc', no:'38'}
        ];
    }]);
    //3.绑定模块 ng-app="app"
    //4.绑定控制器

</script>

<!--3.绑定模块 ng-app="app"-->
<body ng-app="app" ng-controller="xmgController">

<div>
    <p>{{name}}</p>
</div>

<div>
    <h1>{{msg}}</h1>
</div>

<div>
    <ul>
        <!--指令:angular给原生的html标签添加一些新属性,达到自己指定的功能-->
        <!--所有指令都以ng-开头-->

        <!--遍历-->
        <!--<li ng-repeat="(key, value) in course">{{key}}-{{value}}</li>-->
        <li ng-repeat="value in course">{{value}}</li>

    </ul>

    <ul>
        <li ng-repeat="per in stu">{{per.name}}-{{per.no}}</li>
    </ul>

</div>

</body>
</html>


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容