<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>angular gtest</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<style>
.odd{
background-color:red;
}
.even{
background-color:green;
}
.first{
background-color:yellow;
}
.last{
background-color:aqua;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Your email
匹配字母：
-->
<hr>
<p>姓名：<input type="text" name="username" ng-model="username" ng-readonly="isRead"></p>
<p>年龄：<input type="text" name="age" ng-model="age" ng-disabled="isDisable"></p>
<hr>
<label>Select city:</label>
<input type="checkbox" ng-model="isTwoFish"><br/>
<select>
<option>上海</option>
<option ng-selected="isTwoFish">北京</option>
<option>郑州</option>
<option>商丘</option>
</select>
<hr>
<input type="text" ng-model="pname">
<div ng-switch on="pname">
<p ng-switch-default>Bowen</p>
<h1 ng-switch-when ="jy">{{pname}}</h1>
</div>
<hr>
<div ng-if="2+2==5">
<p>Hello,2+2= 5</p>
</div>
<div ng-if="2+2 == 4">
<p>Hello, 2+2 =4</p>
</div>
<hr>
<div ng-repeat="person in people" ng-class="{even: !$even,odd: !$odd,first: $first,last: $last}">
<p>
{{person.username}} lives {{person.city}}
</p>
</div>
<hr>
<div>
<input type="text" ng-model ="p.x" ng-change="changeReslt()" >
<code>{{p.y}}</code>
</div>
</div>
</body>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller("myController",function($scope){
$scope.username ="lisi";
if($scope.username =="lisi"){
$scope.isRead =true;
}else{
$scope.isRead =false;
}
$scope.age =20;
if($scope.age ==20){
$scope.isDisable =true;
}else{
$scope.isDisable =false;
}
//ng-repeat 现实遍历颜色变化
$scope.people = [{"username":"zhangsan","city":"shanghai"},{"username":"lisi","city":"beijing"},
{"username":"zhaoliu","city":"shangqiu"},{"username":"xiaoqi","city":"yucheng"}];
//ng-change 事件
$scope.changeReslt =function(){
$scope.p.y =parseInt($scope.p.x)+2;
}
});
</script>
</html>
网友评论