首页 > > 网页制作 > Javascript >

angularjs学习第七天笔记（系统指令学习）

2018-09-01 05:49:06来源：博客园阅读 ()

　　您好，接着在昨天对简单指令学习了解以后，今天开始学习了解angularjs中的系统指令

　　系统指令大部分都是以ng开始，这也是为什么在自定义指令命名时不要以ng开始的原因所在

　　系统指令在学习了分成两个部分进行学习：基础指令、在指令中使用子作用域

　　第一、基础指令

　　　　基础指令由包括bool型和类bool型两类

　　　　bool型指令，就是其值是一bool值（true or false）

　　　　1.1、bool指令包括：

　　　　ng-disabled:主要控制控件是否可操作

　　　　ng-readonly:控制文本输入框为只读

　　　　ng-check:控制选择框是否被选中

　　　　ng-selected：控制下拉框选中项

　　　　1.2、类布尔指令包括：

　　　　ng-href 指令：与html中的href对应，其好处是当为给其赋值时

　　　　ng-src指令：与html中的src对应，表达式生效之前不要加载图像：

　　　　一个简单的练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
    <div>
        <h1> ng-disabled指令</h1>
        <input type="text" ng-disabled="isDisable" placeholder="3s后我才可操作" />
    </div>

    <div>
        <h1> ng-readonly指令</h1>
        <input type="text" ng-model="isReadonly" placeholder="只要我不空下面就不可操作" />
        <input type="text" ng-readonly="isReadonly" placeholder="前面不为空我就不可操作啦" />
    </div>

    <div>
        <h1> ng-check指令</h1>
        是否选中王先生<input type="checkbox" ng-model="isSelected" value="是否选中王先生" />
        <select>
            <option>许先生</option>
            <option ng-selected="isSelected">王先生</option>
        </select>
    </div>
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myContro", function ($scope, $timeout) {
        $scope.isDisable = true;
        $timeout(function () {
            ///// 3秒后开启控件可操作
            $scope.isDisable = false;
        }, 3000)
    });
</script>

　　　　第二、在指令中使用子作用域

　　　　　　指令中使用子作用域，其简单的理解就是，其指令会创建一个隔离的作用子域，基础父作用域。

　　　　　　1、ng-app:DOM元素将被标记为$rootScope的起始点

　　　　　　　　　在JavaScript代码中通过run方法来访问$rootScope。

　　　　　　2、ng-controller:控制器，创建一个子域

　　　　　　3、ng-include :其实现功能效果就是，模块化加载外部的模块

　　　　　　　使用注意要点：

　　　　　　　　a.ng-include,如果单纯指定地址，必须要加引号

　　　　　　　　b.ng-include,加载外部html，script标签中的内容不执行，不能加载，如果需要控制器处理需要在主页中注册

　　　　　　　　c.ng-include,加载外部html中含有style标签样式可以识别

　　　　　　　　d. ng-inclue,记载外部html中的link标签可以加载

　　　　　　　使用距离：

　　　　　　　　<div ng-include="/myTemplateName.html"

　　　　　　　　　　ng-controller="MyController"

　　　　　　　　　　ng-init="name = 'World'">

　　　　　　　　　　Hello {{ name }} </div>

　　　　　　4、ng-switch ：根据条件选择性的加载

　　　　　　　　格式为：ng-switch on="名称"

　　　　　　　　　　　　ng-switch-default:默认处理

　　　　　　　　　　　　ng-switch-when='具体的值'

　　　　　　　　来一个练习：　　　　　　

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
    <div>
        <h1>  ng-switch指令</h1>
        <select ng-model="selectValue">
            <option value="">请选择</option>
            <option value="xu">许先生</option>
            <option value="wang">王先生</option>
        </select>
        <div ng-switch on="selectValue">
            <div ng-switch-default>请先选择</div>
            <div ng-switch-when="xu">你选择的许先生</div>
            <div ng-switch-when="wang">你选择的王先生</div>
        </div>
    </div>
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
</script>

　　5、ng-if ：根据条件选择性的是否加载

　　　ng-if和ng-show、ng-hide都能够实现标签的显示隐藏

　　　但是其有本质的区别，ng-if是直接不加载，而后者是通过css样式控制

　　　代码实例：

　　　　<div>

　　　　　　<h1> ng-if指令</h1>
　　　　　　是否显示<input type="checkbox" ng-model="isShow" />
　　　　　　<div ng-if="isShow">
　　　　　　　　需要显示还是隐藏我，你们自己控制吧！
　　　　　　</div>
　　　　</div>

　　6、ng-repeat:循环遍历一个集合数据，根据模板生成数据列

　　　几个关键属性值：　

　　　　$index：遍历的进度（0...length-1）
　　　　$first：当元素是遍历的第一个时值为true
　　　　$middle：当元素处于第一个和后元素之间时值为true
　　　　$last：当元素是遍历的后一个时值为true
　　　　$even：当$index值是偶数时值为true
　　　　$odd：当$index值是奇数时值为true

　　　　ng-repeat在数据列表显示中用的比较多，在实际使用中可以根据其关键字进行样式设置展示

　　　　特别说明：集合数据的开始坐标是0，所以在处理奇偶数时要注意

　　　　来一个练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
     <style type="text/css">
        .even {
            background-color: #b6ff00;
        }

        .odd {
            background-color: #808080;
        }
    </style>

    <div>
        <h1>ng-repeat指令</h1>
        <div ng-repeat="user in uesrList">
            <div style="width:400px;height:40px;line-height:40px;" ng-class="even:!$even;odd:!odd">您好{{user.name}}</div>
        </div>
        <div>
            姓名：<input type="text" ng-model="addName" placeholder="请输入新增的姓名" /><br />
            <input type="button" ng-disabled="!addName" value="新增" ng-click="addNewName()" />
        </div>
    </div>

</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myContro", function ($scope, $timeout) {
        $scope.addName = "";
        $scope.uesrList = [{ name: "许先生" }, { name: "赵先生" }, { name: "刘先生" },]
        $scope.addNewName = function () {
            $scope.uesrList.push({ name: $scope.addName });
        };
    });
</script>