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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwpzpx.html