Angular/1.4.6/Demos

验证规则传送门：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

原文链接：https://www.f2er.com/angularjs/148128.html

猜你在找的Angularjs相关文章