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>

 

posted @ 2015-10-21 10:21  Mi文  阅读(137)  评论(0)    收藏  举报