angularjs入門-ng-show,ng-hide,ng-if

angularjs入門-ng-show,ng-hide,ng-if

其實這三個directive很像,用法也大同小異,ng-if是會動態增減元素,ng-show和ng-hide則是把元素顯示和隱藏而已,只是用隱藏的方式隱藏起來,就像jquery的$.show()和$.hide()的概念,使用上其實也非常簡單,建立一個ng-repeat來說明,我現在只想顯示people,其餘非人類的全部預設就都不存在,那我就可以使用ng-if的方式,我們也可以想成就像在view上面寫if的感覺,如下例子

image


<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

 

image

image

 


    <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>

現在假設一下,我們有三顆顆按鈕,一顆是人類,一顆是狗,一顆是老鼠,按了人類只顯示人類的資料,反之則顯示動物,以下是例子

 

image

image

image


    <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>

 

以上再請大家多多指教