初探angularJS 二

来源：互联网发布：access数据库实验心得编辑：程序博客网时间：2024/06/05 16:48

                                                                         初探angularJS 二
1 禁用 disabled指令
         <buttonng-disabled="mySwitch">点我!</button>
2 显示和隐藏指令 ng-show=""   ng-hide=" "
         <bodyng-app="myApp">
<divng-controller="personCtrl-show">
         <buttonng-click="toggle()">隐藏/显示</button>
         <p ng-show="myVarShow">
         名: <inputtype=text ng-model="person.firstName"><br>
         姓: <inputtype=text ng-model="person.lastName"><br><br>
         姓名:{{person.firstName + " " + person.lastName}}
         </p>
</div>
<script>
var app =angular.module('myApp', []);
//show
app.controller('personCtrl-show',function($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
    $scope.myVarShow = true;
    $scope.toggle = function() {
        $scope.myVarShow = !$scope.myVarShow;
    };
});
</script>
3 表单
<divng-app="myApp" ng-controller="formCtrl">
<form novalidate>
    First Name:<br>
    <input type="text"ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text"ng-model="user.lastName">
    <br><br>
    <buttonng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。
4 鼠标事件
单击
         <divng-controller="LearnCtrl">
                   <divng-click="click()">click</div>
                   <buttonng-click="click()">click</button>
         </div>
双击
         <divng-controller="LearnCtrl-dblclick">
                   <divng-dblclick="dblclick()">dblclick</div>
                   <buttonng-dblclick="dblclick()">dblclick</button>
         </div>

         <divng-controller="LearnCtrl-mousedown">
                   <buttonng-mousedown="mousedown($event)">mousedown</button>
         </div>
         <br/><br/>
         <divng-controller="LearnCtrl-up">
                   <buttonng-mouseup="mouseup($event)">mouseup</button>
         </div>
         <br/><br/>
         <divng-controller="LearnCtrl-enter">
                   <buttonng-mouseenter="mouseenter($event)">mouseenter</button>
         </div>
         <br/><br/>
         <divng-controller="LearnCtrl-leave">
                   <buttonng-mouseleave="mouseleave($event)">mouseleave</button>
         </div>
         <br/><br/>
         <divng-controller="LearnCtrl-move">
                   <buttonng-mousemove="mousemove($event)">mousemove</button>
         </div>

5 键盘事件
<body ng-app="myApp">
     <divng-controller="LearnCtrl-keyDown">
              <inputtype="text" ng-keydown="keydown($event)"/>
              <textareacols="30" rows="10"ng-keydown="keydown($event)">keydown</textarea>
     </div>
     <hr>
     <divng-controller="LearnCtrl-keyUp">
              <input type="text"ng-keyup="keyup($event)"/>
              <textareacols="30" rows="10"ng-keyup="keyup($event)">keyup</textarea>
     </div>
     <hr>
     <divng-controller="LearnCtrl-keyPress">
              <inputtype="text" ng-keypress="keypress($event)"/>
              <textareacols="30" rows="10" ng-keypress="keypress($event)">keypress</textarea>
     </div>
<script>
     var app =angular.module('myApp', []);
     //keyDown
       app.controller('LearnCtrl-keyDown', function ($scope) {
            $scope.keydown =function ($event) {
                alert($event.keyCode);
            }
        });
     //keyUp
              app.controller('LearnCtrl-keyUp',function ($scope) {
            $scope.keyup =function ($event) {
               alert($event.keyCode);
            }
        });
     //keyPress
              app.controller('LearnCtrl-keyPress',function ($scope) {
            $scope.keypress =function ($event) {
               alert($event.keyCode);
            }
        });

</script>
6 其他事件
ng-focus="focus()" 和 ng-blur="blur()"

7 判断api
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 ="JOHN";
    $scope.x2 =angular.isString($scope.x1);
     $scope.y1 = 123456;
    $scope.y2 =angular.isString($scope.y1);
     $scope.y3 =angular.isNumber($scope.y1);
});
</script>

8 css动画
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}

.ng-hide {
height: 0;
width: 0;
background-color:transparent;
top:-200px;
left: 200px;
}

</style>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
</head>

<body ng-app="ngAnimate">

<h1>DIV动画: <input type="checkbox"ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>
9 开关动画
<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8">
    <styletype="text/css">
      .highlight {
         transition: 1s linearall;
      }

     .highlight.on-add {
         background: white;
      }
      .highlight.on {
     background: yellow;
      }
      .highlight.on-remove {
          background: black;
      }
     </style>
     <scriptsrc="angular.min.js"></script>
     <scriptsrc="angular-animate.min.js"></script>
     <scripttype="text/javascript">
       (function () {
         var app =angular.module('cssClassBasedAnimationTest', ['ngAnimate']);
       })();
      </script>
</head>
<body ng-app="cssClassBasedAnimationTest"ng-init="bool=true">
<divng-class="{on:onOff}" class="highlight">
     Highlight this box
</div>
<buttonng-click="onOff=!onOff">Toggle</button>
</body>
</html>
10 简易记事本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body ng-app="myNoteApp"ng-controller="myNoteCtrl">
<h2>我的笔记</h2>
<textarea ng-model="message" cols="40"rows="10"></textarea>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩余字数: <span ng-bind="left()"></span></p>
<script>
     var app =angular.module("myNoteApp", []);
     app.controller("myNoteCtrl",function($scope) {
              $scope.message ="";
              $scope.left = function() {return 100 -$scope.message.length;};
              $scope.clear =function() {$scope.message = "";};
              $scope.save = function() {alert("NoteSaved");};
     });
</script>
<br><br><br><br>
</body>
</html>

0 0