首页 > Web开发 > 详细

angularjs 标签指令

时间:2016-08-05 11:27:26      阅读:107      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.active1{ background:red;}
.active2{ background:blue;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module(myApp,[]);
m1.controller(Aaa,[$scope,function($scope){
    $scope.dataList = [
        aaaaa , bbbbb , cccccc , dddddd , eeeeee
    ];
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
    <input type="checkbox" ng-model="aaa">   //checkbox选中则aaa为true
    <select>
        <option>11111</option>
        <option ng-selected="aaa">22222</option>   //下拉选择框是否选择取决于aaa变量
    </select>
    //输入框变化就会出发输入框的值为hello
    <input type="text" ng-change="bbb=‘hello‘" ng-model="bbb">{{bbb}}<br>
    //ng-paste="ccc=true"当输入框复制操作时时ccc=true,
    <input type="text" value="aasdassssssss" ng-paste="ccc=true">{{ccc}}
</div>
</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>
<script>
var m1 = angular.module(myApp,[]);
m1.controller(Aaa,[$scope,$interval,function($scope,$interval){
    var iNow = 5;
    $scope.text = iNow+;
    $scope.isDisabled = true;
    //setInterval -> $scope.$apply()
    //$timeout   $interval
    var timer = $interval(function(){
        iNow--;
        $scope.text = iNow+;
        
        if(iNow == 0){
            $interval.cancel(timer);
            $scope.text = 可以点击啦;
            $scope.isDisabled = false;
        }
    },1000);
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
    //ng-disabled="isDisabled",isDisabled是变量名
    <input type="button" ng-value="text" ng-disabled="isDisabled">
    <input type="text" value="{{text}}" ng-readonly="isDisabled">
    <input type="checkbox" value="{{text}}" ng-checked="isDisabled">
</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>
//引入插件,ngSanitize模块
<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]);  //[‘ngSanitize‘]是引入ngSanitize模块
m1.controller(Aaa,[$scope,function($scope){
    $scope.text = <h1>hello</h1>;
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
    <div ng-bind="text"></div>  //跟ng-value和写表达式是一样的
    <div ng-bind-template="{{text}},{{text}}"></div>  //ng-bind-template用于写多个表达式
    <div ng-bind-html="text"></div>   //解析html内容,要引入ngSanitize模块
    <div ng-cloak>{{text}}</div> //ng-cloak用于没有解析完毕时不显示解析完毕后解析,用户体验好。
    <div ng-non-bindable>{{text}}</div> //原样输出,不进行解析。
</div>
<script>
alert(1);  //阻止后面的js的执行
</script>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<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}";
    $scope.url = "http://www.baidu.com";
}]);
</script>
</head>

<body>
<div ng-controller="Aaa">
    <div ng-class="{red:true}">{{text}}</div>  //激活red样式
    <div ng-class="{red:true,yellow:true}">{{text}}</div> //激活red和yellow样式
    <div ng-class="{{sClass}}">{{text}}</div>
    <div ng-style="{color:‘red‘,background:‘yellow‘}">{{text}}</div>
    <div ng-style="{{style}}">{{text}}</div>
    <a ng-href="{{url}}">aaaaaaa</a>
    <a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-class="" ng-attr-style="">aaaaaaa</a>
</div>
<script>
alert(1);  //阻止后面js的执行
</script>
</body>
</html>

 

angularjs 标签指令

原文:http://www.cnblogs.com/yaowen/p/5740421.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!