AngularJs 常见内置指令

来源：互联网发布：vb.net如何连接数据库编辑：程序博客网时间：2024/05/29 16:45
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>AngularJS 指令</title><!-- <link rel="stylesheet" ng-href="{{link}}"> --><style>.red {color: red;}.blue {color: blue;}</style></head><!--指令: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下拉框表单选中ng-init初始化数据--><body ng-app="App"><ul ng-controller="DemoController"><li ng-bind="name"></li><li>{{name}}</li><li ng-show="1">ng-show用来显示或隐藏内容的，当值为true时显示</li><li ng-hide="0">ng-hide用来显示或隐藏内容的，当值为true时隐藏</li><li ng-if="1">ng-if用来控制元素是否存在，当值为true时存在{{name}}</li><li><img ng-src="{{path}}" alt=""></li><li ng-class="{red: true, blue: true}">ng-class指令</li><li><input type="text" ng-disabled="0"></li><li><input type="text" ng-readonly="1" value="angular"></li><li><input type="checkbox" ng-checked="1">男</li><li><select name="" id=""><option value="">河北省</option><option value="">山东省</option><option value="" ng-selected="1">北京市</option></select></li></ul><script src="./libs/angular.min.js"></script><script>// 创建模块var App = angular.module('App', []);App.controller('DemoController', ['$scope', function ($scope) {// $scope$scope.name = '张飞';$scope.path = './images/author.jpg';$scope.link = './main.css';}]);</script></body></html>
0 0