<html>
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>混合多选</title>
<link rel="stylesheet" href="css/angular-csp.css"/>
</head>
<body>
{{'第一个，数据的双向banding'}}
<div>
{{"第一个"}}
{{funding.needed}}
</div>
<br>
{{'第二个，数据的双向绑定的延伸及方法调用'}}
<div>
<form ng-controller="second">
Starting: <input ng-model="startingEstimate">
Recommendation: {{needed}}
<button ng-click="computeNeeded()">Fund my startup!</button>
</form>
</div>
<br>
{{'第三个，ng-repeat示例，及其插入Insert'}}
<div>
<ul ng-controller='third'>
<li ng-repeat='student in students'>
<a href='/student/view/{{student.id}}'>{{student.name}}</a>
</li>
</ul>
<button ng-click="insertTom()">Insert</button>
</div>
<br>
{{'第四个，表格序号自动生成问题'}}
<div>
<table ng-controller='fourth'>
<tr ng-repeat='track in album'>
<td>{{$index + 1}}</td>
<td>{{track.name}}</td>
<td>{{track.duration}}</td>
</tr>
</table>
</div>
<br>
{{'第五个，ng-show 元素的显示和隐藏'}}
<br>
<div ng-controller='fifth'>
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState.show'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
</div>
<script src="js/angular.js"></script>
<script src="js/ctrl.js"></script>
</body>
</html>
js:
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope){
});
app.controller('second',function($scope){
$scope.computeNeeded = function() {
$scope.needed = $scope.startingEstimate * 10;
};
$scope.requestFunding = function() {
window.alert("Sorry, please get more customers first.");
};
});
app.controller('third',function($scope){
var students = [{name:'Mary Contrary', id:'1'},
{name:'Jack Sprat', id:'2'},
{name:'Jill Hill', id:'3'}];
$scope.students = students;
$scope.insertTom = function () {
$scope.students.splice(1,1, {name:'Tom Thumb', id:'4'});
};
});
app.controller('fourth',function($scope){
var album = [{name:'Southwest Serenade', duration: '2:34'},
{name:'Northern Light Waltz', duration: '3:21'},
{name:'Eastern Tango', duration: '17:45'}];
$scope.album = album;
});
app.controller('fifth',function($scope){
$scope.menuState={'show':false};
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
}
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
