angularjs入門-ng-show,ng-hide,ng-if
其實這三個directive很像，用法也大同小異，ng-if是會動態增減元素，ng-show和ng-hide則是把元素顯示和隱藏而已，只是用隱藏的方式隱藏起來，就像jquery的$.show()和$.hide()的概念，使用上其實也非常簡單，建立一個ng-repeat來說明，我現在只想顯示people，其餘非人類的全部預設就都不存在，那我就可以使用ng-if的方式，我們也可以想成就像在view上面寫if的感覺，如下例子
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<ul ng-repeat="item in people">
<li ng-if="item.animalType==='people'">{{item.name}}-{{item.animalType}}</li>
</ul>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.people = [
{ name: 'anson', animalType: 'people' },
{ name: 'andy', animalType: 'people' },
{ name: 'coco', animalType: 'people' },
{ name: 'lucky', animalType: 'dog' },
{ name: 'micky', animalType: 'mouse' },
];
});
</script>
</body>
</html>
我們也可以直接在js檔裡面去寫，如下例子
<div ng-controller="FirstCtrl">
<ul ng-repeat="item in people">
<li ng-if="showPeople(item.animalType)">{{item.name}}-{{item.animalType}}</li>
</ul>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.people = [
{ name: 'anson', animalType: 'people' },
{ name: 'andy', animalType: 'people' },
{ name: 'coco', animalType: 'people' },
{ name: 'lucky', animalType: 'dog' },
{ name: 'micky', animalType: 'mouse' },
];
$scope.showPeople=function(animalType) {
if(animalType=='people')
return true;
}
});
</script>
</body>
接著我們來示範一下ng-show和ng-hide的用法，現在假設我們按一下按鈕，就能隱藏資料，再按一下就能顯示資料，特別注意一下ng-show=!displayAnimal可以改成ng-hide=displayAnimal
<div ng-controller="FirstCtrl">
<input type="button" ng-click="toggle()" value="送出" />
<ul ng-repeat="item in people">
<li ng-show="!displayAnimal">{{item.name}}-{{item.animalType}}</li>
</ul>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.people = [
{ name: 'anson', animalType: 'people' },
{ name: 'andy', animalType: 'people' },
{ name: 'coco', animalType: 'people' },
{ name: 'lucky', animalType: 'dog' },
{ name: 'micky', animalType: 'mouse' },
];
$scope.toggle = function () {
$scope.displayAnimal =!$scope.displayAnimal;
}
});
</script>
</body>現在假設一下，我們有三顆顆按鈕，一顆是人類，一顆是狗，一顆是老鼠，按了人類只顯示人類的資料，反之則顯示動物，以下是例子
<div ng-controller="FirstCtrl">
<input type="button" ng-click="showPeople()" value="人類" />
<input type="button" ng-click="showDog()" value="狗" />
<input type="button" ng-click="showMouse()" value="老鼠" />
<ul ng-repeat="item in people">
<li ng-show="item.animalType==displayAnimal">{{item.name}}-{{item.animalType}}</li>
</ul>
</div>
<script src="Scripts/angular.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.people = [
{ name: 'anson', animalType: 'people' },
{ name: 'andy', animalType: 'people' },
{ name: 'coco', animalType: 'people' },
{ name: 'lucky', animalType: 'dog' },
{ name: 'micky', animalType: 'mouse' },
];
$scope.showPeople = function () {
$scope.displayAnimal = 'people';
}
$scope.showDog = function () {
$scope.displayAnimal = 'dog';
}
$scope.showMouse = function () {
$scope.displayAnimal = 'mouse';
}
});
</script>
</body>
以上再請大家多多指教
