- 複數元素資料
當我們要顯示出多筆物件的資料時，angular有提供ng-repeat的元素它會複製每一筆資料出來
範例一
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<form ng-controller="fruitController">
<ul>
<li ng-repeat="f in fruit">
<a href="/fruit/view/{{f.id}}"> {{f.name}} </a>
</li>
</ul>
</form>
</body>
<script>
var fruit = [{name:"apple",id:"2"},
{name:"orange",id:"3"},
{name:"watermelon",id:"4"}
]
var myApp = angular.module('myApp',[]) ;
myApp.controller('fruitController',function($scope){
$scope.fruit = fruit;
})
</script>
</html>
- Hiding and Showing
當我們需要隱藏或是顯示資訊時，angular提供ng-show和ng-hide兩種方法可以使用，menuState預設
為隱藏(false)，當按下'toggleMenu會更改menuState為顯示(true)。
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<form ng-controller="hideController">
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState.show'>
<li>menu1</li>
<li>menu2</li>
</ul>
</form>
</body>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('hideController', function($scope){
$scope.menuState = {show:false};
$scope.toggleMenu = function(){
$scope.menuState.show = !$scope.menuState.show;
}
});
</script>
</html>
- menu1
- menu2
- Class and Styles
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<style>
.error {
background-color: red;
}
.warning {
background-color: blue;
}
</style>
</head>
<body>
<form ng-controller="cssController">
<div ng-class="{error:error, warning:warning}" >{{message}}</div>
<input type="button" ng-click="error()" name="btnerror" value="show error" />
<input type="button" ng-click="warning()" name="btnwarning" value="show warning" />
</form>
</body>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('cssController', function($scope){
$scope.error = function(){
$scope.error = true;
$scope.warning = false;
$scope.message = "It is a error !"
}
$scope.warning = function(){
$scope.error = false;
$scope.warning = true;
$scope.message = "It is a warning !"
}
});
</script>
</html>It is a warning !
留言
張貼留言