html
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>学习</title>
<script src="js/angular.min.js"></script>
<script src="js/a1.js"></script>
</head>
<body>
<div ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
<br />
<button name="btn_1" ng-click="person.xhello()" >提示一下</button>
</div>
<br />
<br />
<div ng-controller="MyController">
<button name="btn_2" ng-click="sayHello()" >调ajs函数</button>
</div>
<br />
<button ng-init="shouldShow = true" ng-click="shouldShow = !shouldShow">Flip the shouldShow variable</button>
<div ng-show="shouldShow">
<h3>Showing {{ shouldShow }}</h3>
</div>
<br />
<div ng-hide="shouldShow">
<h3>Hiding {{ shouldShow }}</h3>
</div>
<br />
<br />
<div ng-controller="namesController">
<ul>
<li ng-repeat="x in names | orderBy:'country' ">
{{ x.name + ', ' + x.country }} ... {{x.name | uppercase }}
</li>
</ul>
</div>
<br />
事件
<div controller="myController">
<button ng-click="count = count + 1">点我！</button>
<p>{{count}}</p>
</div>
<br />
<br />
表单验证
<h2>Validation Example</h2>
<form ng-app="" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
</body>
</html>
a1.js
var myApp = angular.module('myApp',[]);
myApp.controller('MyController', function($scope) {
var count=0;
$scope.sayHello = function() {
console.log("------MyController.sayHello()");
alert("hello!");
}
});
myApp.controller('personController', function($scope) {
//person = this;
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.person.xhello = function(){
alert("xx");
console.log('-----------测试');
};
});
myApp.controller('namesController', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
myApp.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
