AngularJs: ng-show

Простейшая директива, но очень полезная — показывает или прячет кусок страницы. Может использовать как переменную, так и условие, функцию… удобно и аккуратно.

Переменная для ng-show

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
    <div ng-app="demoApp" ng-controller="demoCtrl">
        <a ng-click="showMe=!showMe">спрятать куку</a>
        <p ng-show="showMe">
            ку-ку
        </p>
    </div>
    <script>
        var app = angular.module('demoApp', []);
            app.controller('demoCtrl', function($scope) {
            $scope.showMe = true;
        });
    </script>
</body>
</html>

Или даже так

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
    <div ng-app="demoApp" ng-controller="demoCtrl">
        <a ng-click="toggleMe">спрятать куку</a>
        <p ng-show="showMe">
            ку-ку
        </p>
    </div>
    <script>
        var app = angular.module('demoApp', []);
            app.controller('demoCtrl', function($scope) {
            $scope.showMe = true;
            $scope.toggleMe = function() {
                $scope.showMe = !$scope.showMe;
            };
        });
    </script>
</body>
</html>

Условие на показ

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
    <div ng-app="demoApp" ng-controller="demoCtrl">
        <a ng-click="plusMe()">{{showMe}}</a>
        <p ng-show="showMe%3==0">
            кратно трем
        </p>
    </div>
    <script>
        var app = angular.module('demoApp', []);
            app.controller('demoCtrl', function($scope) {
            $scope.showMe = -;
            $scope.plusMe = function() {
                $scope.showMe++;
            };
        });
    </script>
</body>
</html>

Функция на показ

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
    <div ng-app="demoApp" ng-controller="demoCtrl">
        <a ng-click="plusMe()">{{showMe}}</a>
        <p ng-show="testMe()">
            кратно трем
        </p>
    </div>
    <script>
        var app = angular.module('demoApp', []);
            app.controller('demoCtrl', function($scope) {
            $scope.showMe = -;
            $scope.plusMe = function() {
                $scope.showMe++;
            };
            $scope.testMe = function() {
                return $scope.showMe%3==0;
            };
        });
    </script>
</body>
</html>

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">