AngularJS
Использование встроенных директив

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap

Скрыть / Показать элементы HTML

В этом примере скрывают элементы html show.

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>

      function HideShowController() {
        var vm = this;
        vm.show=false;
        vm.toggle= function() {
          vm.show=!vm.show;
        }
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .controller("hideShowController", [HideShowController]);
    </script>
  </head>
  <body ng-cloak>
    <div ng-controller="hideShowController as vm">
      <a style="cursor: pointer;" ng-show="vm.show" ng-click="vm.toggle()">Show Me!</a>
      <a style="cursor: pointer;" ng-hide="vm.show" ng-click="vm.toggle()">Hide Me!</a>
    </div>
  </body>
</html>

Демо-версия

Пошаговое объяснение:

ng-app="myDemoApp" , директива ngApp сообщает угловой, что элемент DOM управляется определенным угловым модулем с именем myDemoApp.
<script src="[//angular include]"> включают угловые js.
Функция HideShowController определена с другой функцией с именем toggle которая помогает скрыть отображение элемента.
angular.module(...) создает новый модуль.
.controller(...) Angular Controller и возвращает модуль для цепочки;
Директива ng-controller является ключевым аспектом того, как угловые поддерживают принципы, лежащие в основе шаблона проектирования Model-View-Controller.
Директива ng-show показывает данный HTML-элемент, если выражение указано верно.
Директива ng-hide скрывает данный HTML-элемент, если выражение указано верно.
Директива ng-click запускает функцию переключения внутри контроллера

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow