Angularjs笔记(四)
1、模块同时载入多个模式,html标签要去掉my-app
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp1',[]); var m2 = angular.module('myApp2',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = 'hello'; }]); m2.controller('Bbb',['$scope',function($scope){ $scope.name = 'hi'; }]); document.onclick = function(){ var aDiv = document.getElementsByTagName('div'); angular.bootstrap(aDiv[0],['myApp1']); angular.bootstrap(aDiv[1],['myApp2']); }; </script> </head> <body> <div ng-controller="Aaa"> <p>{{name}}</p> </div> <div ng-controller="Bbb"> <p>{{name}}</p> </div> </body> </html>
2、让页面还没有加载完之前不显示html表达式{{***}}的内容
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script> <script> var m1=angular.module("myApp",["ngSanitize"]); m1.controller("Aaa",["$scope","$interval",function($scope,$interval){ $scope.text='<h1>hello</h1>'; }]); </script> </head> <body> <div ng-controller="Aaa"> <!--<div ng-bind="text"></div>--> <!--<div ng-bind-template="{{text}},{{text}}"></div>--> <!--<div ng-bind-html="text"></div>--> <div ng-cloak>{{text}}</div> <!--<div ng-non-bindable>{{text}}</div>--> </div> <script> alert(1); </script> </body> </html>
对样式的操作
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <style> .red{color: red;} .yellow{background: yellow;} .fontsize{font-size: 20px;} </style> <script> var m1=angular.module("myApp",[]); m1.controller("Aaa",["$scope",function($scope){ $scope.text="hello"; $scope.style="{color:'red',background:'yellow'}"; $scope.sClass="{red:true,yellow:true,fontsize:true}"; $scope.url="http://www.sss.com"; }]); </script> </head> <body> <div ng-controller="Aaa"> <div ng-class="{{sClass}}">{{text}}</div> <div ng-style="{{style}}">{{text}}</div> <a ng-href="{{url}}">aaa</a> <a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-style="{{style}}">aaa</a> </div> </body> </html>
ng-if ng-show ng-switch用法
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <style> .red{color: red;} .yellow{background: yellow;} .fontsize{font-size: 20px;} </style> <script> var m1=angular.module("myApp",[]); m1.controller("Aaa",["$scope",function($scope){ $scope.bBtn=true; }]); </script> </head> <body> <div ng-controller="Aaa"> <input type="checkbox" ng-model="bBtn"> <!--<div ng-show="bBtn">aaaa</div>--> <!--<div ng-if="bBtn">aaaa</div>--> <div ng-switch on="bBtn"> <p ng-switch-default>默认的效果</p> <p ng-switch-when="false">切换的效果</p> </div> </div> </body> </html>
ng-repeat---->$index、ng-init
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1=angular.module("myApp",[]); m1.controller("Aaa",["$scope",function($scope){ $scope.arr=[["a","b"],["c","d"]]; }]); </script> </head> <body> <div ng-controller="Aaa"> <div ng-repeat="arrOuter in arr" ng-init="outerIndex=$index"> <div ng-repeat="arrInner in arrOuter" ng-init="innerIndex=$index"> <p>{{arrInner}}:{{outerIndex}}{{innerIndex}}</p> </div> </div> </div> </body> </html>
ng-include载入页面
<script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ //$scope.text = 'hello'; $scope.arr = [['a','b'],['c','d']]; }]); </script> <!--<div ng-controller="Aaa" ng-init="text='hello'"> {{ text }} </div>--> <div ng-controller="Aaa" ng-include="'temp.html'"> </div>
写成面向对象的形式
<script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',FnAaa]); function FnAaa($scope){ } FnAaa.prototype.num = '123'; FnAaa.prototype.text = 'hello'; FnAaa.prototype.show = function(){ return 'angularJS'; }; </script> <div ng-controller="FnAaa as a1"> <div>{{a1.text}}:{{a1.show()}}</div> </div>
表单验证
<script> var m1=angular.module("myApp",[]); m1.controller("Aaa",["$scope",function($scope){ $scope.text = 'hello'; }]); </script> <div ng-controller="Aaa"> <form novalidate name="myForm"> <input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/"> <div>{{ myForm.myText.$valid }}</div> <div>{{ myForm.myText.$invalid }}</div> <div>{{ myForm.myText.$pristine }}</div> <div>{{ myForm.myText.$dirty }}</div> <div>{{ myForm.myText.$error }}</div> </form> </div>
<script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.regText = { regVal : 'default', regList : [ { name : 'default' , tips : '请输入用户名'}, { name : 'required' , tips : '用户名不能为空'}, { name : 'pattern' , tips : '用户名必须是字母'}, { name : 'pass' , tips : '√'} ] }; $scope.regPassword = { regVal : 'default', regList : [ { name : 'default' , tips : '请输入密码'}, { name : 'required' , tips : '密码不能为空'}, { name : 'minlength' , tips : '密码至少6位'}, { name : 'pass' , tips : '√'} ] }; $scope.change = function( reg , err ){ for(var attr in err){ if( err[attr] == true ){ $scope[reg].regVal = attr; return; } } $scope[reg].regVal = 'pass'; }; }]); </script> <div ng-controller="Aaa"> <form novalidate name="nForm"> <div> <label>用户名:</label> <input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)"> <span ng-repeat=" re in regText.regList | filter : regText.regVal ">{{ re.tips }}</span> </div> <div> <label>密码:</label> <input type="password" name="nPassword" ng-model="regPassword.name" required ng-minlength="6" ng-blur="change('regPassword',nForm.nPassword.$error)"> <span ng-repeat=" re in regPassword.regList | filter : regPassword.regVal ">{{ re.tips }}</span> </div> </form> </div>
