angular.js学习demo

<html>
<head>
<meta charset="utf-8">
<title>学习angular.js</title>
<script src="http://cdn.loveqiao.com/jquery.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular.min.js"></script>
</head>
<body>
<h2>控制器:</h2>
<div id="app1" ng-controller="myCtrl"> 姓:
	<input type="text" ng-model="firstName">
	<br>
	名:
	<input type="text" ng-model="lastName">
	<br>
	<br>
	<p>姓名: {{firstName  + " " + lastName}}</p>
</div>
<script>
var module=angular.module('myApp', []);
module.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
//手动启动angular
angular.bootstrap(document.getElementById("app1"),["myApp"]);//相当于在div上添加 ng-app="myApp"
</script>
<!--<h2>$http:</h2>
<div ng-app="myApp2" ng-controller="myCtrl">
	<ul>
		<li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li>
	</ul>
	<input type="button" ng-click="aa()" value="切换">
</div>-->
<button onClick="getData(this)">获取数据</button>
<script>
angular.module('myApp2', []).controller('myCtrl', function($scope, $http) {
    $http.get("data.js").success(function(response) {
		$scope.names = response.records
	});
	$scope.aa=function(){
		$http.get("data2.js").success(function(response) {
			$scope.names = response.records
		});	
	}
});
function getData(obj){
	obj.disabled=true;
	var obj = $('<div ng-controller="myCtrl"><ul><li ng-repeat="x in names"> {{ x.Name + " " + x.Country }} </li></ul><input type="button" ng-click="aa()" value="切换"></div>');
	$('body').append(obj)
	angular.bootstrap(obj[0],["myApp2"]);//相当于在div上添加 ng-app="myApp2"
}
</script>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>