My first angular!
<html ng-app>
<head>
<meta charset="utf-8">
<script src="angular.js"></script>
<script src="controllers.js"></script>
<style>
.selected {
background-color: lightgreen;
}
</style>
</head>
<body>
<div ng-controller=‘HelloController‘>
<input ng-model=‘greeting.text‘ />
<p>{{greeting.text}}, World</p>
</div>
<div ng-controller="CartController">
<div ng-repeat=‘item in items‘>
<span>{{item.title}}</span>
<input ng-model=‘item.quantity‘>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
</div>
<form ng-controller="fundingController">
Starting: <input ng-change="computeNeeded()"
ng-model="funding.startingEstimate">
Recommendation: {{needed}}
<input ng-model="funding.me">
</form>
ng-change ng-submit 就像事件处理函数一样
<form ng-submit="requestFunding()" ng-controller="StartUpController">
Starting:
<input ng-change="computeNeeded()" ng-model="startingEstimate">Recommendation: {{needed}}
<button>Fund my startup!</button>
<button ng-click="reset()">Reset</button>
</form>
<div ng-controller=‘DeathrayMenuController‘>
<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/>
ng-showW为false相当于display none
<table ng-controller=‘RestaurantTableController‘>
<tr ng-repeat=‘restaurant in directory‘ ng-click=‘selectRestaurant($index)‘ ng-class=‘{selected: $index==selectedRow}‘>
<td>{{restaurant.name}}</td>
<td>{{restaurant.cuisine}}</td>
</tr>
</table>
</body>
</html>
JS
function HelloController($scope) {
$scope.greeting = {
text: ‘Hello‘
};
console.log($scope.greeting.text);
}
function CartController($scope) {
$scope.items = [{
title: ‘Paint pots‘,
quantity: 8,
price: 3.95
}, {
title: ‘Polka dots‘,
quantity: 17,
price: 12.95
}, {
title: ‘Pebbles‘,
quantity: 5,
price: 6.95
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
function fundingController($scope) {
$scope.funding = {
startingEstimate: 0
};
$scope.computeNeeded = function() {
$scope.needed = $scope.funding.startingEstimate * 10;
};
computeMe = function(){
console.log(‘me change‘);
}
$scope.$watch(‘funding.me‘,computeMe);
}
function StartUpController($scope) {
$scope.computeNeeded = function() {
$scope.needed = $scope.startingEstimate * 10;
};
$scope.requestFunding = function() {
window.alert("Sorry, please get more customers first."+$scope.needed);
};
$scope.reset = function(){
$scope.needed = $scope.startingEstimate =0;
alert($scope.startingEstimate);
}
}
function DeathrayMenuController($scope) {
//$scope.menuState.show = false;//这样直接写会报错 提示$scope.menuState undefined
//可以这样
//$scope.menuState = {};
//$scope.menuState.show = false;
//不过最好还是用这样的方式
$scope.menuState ={
show: false
};
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
}
function RestaurantTableController($scope){
$scope.directory = [{name:"The Handsome Heifer", cuisine:"BBQ"},{name:"Green‘s Green Greens", cuisine:"Salads"},{name:"House of Fine Fish", cuisine:"Seafood"}];
$scope.selectRestaurant = function($selecteIndex){
$scope.selectedRow = $selecteIndex;
console.log($selecteIndex);
}
}
时间： 2024-12-13 21:00:59