angularjs学习第七天笔记(系统指令学习)

2022-11-30 其他

  您好,接着在昨天对简单指令学习了解以后,今天开始学习了解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>

  7、{{}}与ng-bind指令:两个指令都是实现数据绑定

   区别:由于{{}}绑定数据时,会因为加载后未渲染属性而导致浏览器闪烁,ng-bind不会闪烁

      ng-bind只能执行单个变量绑定

        但是可以借助:ng-bind-template定义一个模板实现多变量绑定

        如:<h1 ng-bind-template ="{{text}} {{text}}" ></h1>

    今天就到此为止,明天继续研究指令的生深入研究学习

上一篇:angularjs学习第六天笔记(指令简介学习)

下一篇:除了任务管理工具,你还需要知道甘特图