验证规则传送门：http://www.cnblogs.com/rohelm/p/4033513.html
myApp.js↓↓↓
var myApp = angular.module('myApp',[]);
myApp
//控制器
.controller('myCtrl',function($scope,$rootScope,$location,$http,$timeout,$interval){
//全局
$rootScope.globalProName = "Demo";
//location服务
$scope.localUrl = $location.absUrl();
//http服务
$http.get("api.html").then(function(response){
console.log(response.status);//200
console.log(response.statusText);//OK
console.log(response.data);
});
$http.get("PHPServerData.json").success(function(response){
$scope.sitesData = response.sites;
});
//timeout
$timeout(function(){
$scope.welcomeString = "How do you do!";
},2000);
//interval
$scope.timeNow = new Date().toLocaleTimeString();
$interval(function(){
$scope.timeNow = new Date().toLocaleTimeString();
},1000);
$scope.proName = "Test";
$scope.testData = "Hello";
$scope.arrDemo = ['han','bing','shi'];
$scope.msgNum = 1;
$scope.newsNum = 0;
$scope.sayHello = function(){
$scope.newsNum++;
};
$scope.sitesObject = {
"site01" : "Google","site02" : "Runoob","site03" : "Taobao"
};
})
//自定义指令
.directive("dtMymsg",function(){
return {
scope: false,// 默认值，共享父级作用域
controller: function($scope,$element,$attrs,$transclude){},restrict : "AEC",//A属性E元素C类名
template : "<h1>您有{{msgNum}}条新消息，清注意查看!</h1>"
};
});
index.html ↓↓↓
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title></title>
<!--<script src="js/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/angular.js/1.4.6/angular.min.js"></script>
<script src="js/ctrl/myApp.js"></script>
<style type="text/css">
*{margin: 2px 4px;padding: 0;}
ul,li{list-style: none;}
body{padding: 30px;}
table,td,tr{margin: 0;border-collapse: collapse;}
td{border: 1px solid #ccc;padding: 4px 8px;}
table tr:nth-child(odd) {background-color: #f1f1f1;}
table tr:nth-child(even) {background-color: #ffffff;}
table tr:hover{background-color: cornflowerblue;}
table tr:hover td{color:#ffffff;}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="startTime=0;endTime=5">
<h3>{{timeNow}}</h3>
<ul>
<li ng-repeat="i in sitesData">名称:{{i.Name}} & 地址:{{i.Url}} & 国家:{{i.Country}}</li>
</ul>
<form name="myForm" novalidate><!-- novalidate属性用于禁用浏览器自带的验证规则 -->
<p>项目名字:<input type="text" ng-model="proName"></p>
<h1>{{ testData }} {{ proName }} --- {{ welcomeString }}</h1>
<p>项目开始时间:<input type="text" ng-model="startTime"></p>
<p>项目结束时间:<input type="text" ng-model="endTime"></p>
<p>项目耗时:共计{{endTime - startTime}}小时</p>
<p>新消息数目:<input type="number" name="msgnumber" ng-model="msgNum" required></p>
<p>新消息数目bind方式: <span ng-bind="msgNum"></span></p>
<span style="color:red" ng-show="myForm.msgnumber.$dirty && myForm.msgnumber.$invalid">
<span ng-show="myForm.msgnumber.$error.required">不是一个合法的数值</span>
</span>
<ul>
<li ng-repeat="i in arrDemo">{{ i }}</li>
</ul>
<dt-mymsg></dt-mymsg>
<div dt-mymsg></div>
<div class="dt-mymsg"></div>
<p>{{ localUrl }}</p>
<p>
<button ng-click='sayHello()'>点我投票</button> 当前票数:{{newsNum}}
</p>
<p>下拉选择框(一)(ng-repeat):</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sitesData" value="{{x.Url}}">{{x.Name}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
<p>下拉选择框(二)(ng-options):</p>
<select ng-model="selectedSite2" ng-options="x.Url for x in sitesData">
</select>
<h1>你选择的是: {{selectedSite2}}</h1>
<p>下拉选择框(三)(对象):</p>
<select ng-model="selectedSite3" ng-options="x for (x,y) in sitesObject">
</select>
<h1>你选择的是: {{selectedSite3}}</h1>
<h1>表格</h1>
<table>
<tr ng-repeat="x in sitesData | orderBy : 'Country'">
<td>{{ $index }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
<td ng-if="$odd">单号</td>
<td ng-if="$even">双号</td>
</tr>
</table>
<button type="submit" ng-disabled="myForm.$invalid">提交(新消息为空时被禁用)</button>
</form>
</div>
</body>
</html>
PHPServerData.json ↓↓↓
{
"sites": [
{
"Name": "菜鸟教程","Url": "www.runoob.com","Country": "CN"
},{
"Name": "Google","Url": "www.google.com","Country": "USA"
},{
"Name": "Facebook","Url": "www.facebook.com",{
"Name": "微博","Url": "www.weibo.com","Country": "CN"
}
]
}
-
ng-model指令根据表单域的状态添加/移除以下类 - ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine