Показать скрыть по клику — Angular
В последнее время очень популярным стал js-фреймворк Angular js. Это очень мощная библиотека для создания single page приложений. Она умеет действительно все и сильно расширяется благодаря множеству плагинов. А в связке с bower и gulp - разработка в вашей компании может выйти на качественно новый уровень. Вот я решил следить за последними тенденциями и начал изучать его. По мере возможности буду выкладывать простенькие решения на Angular js. Итак, сегодня мы научимся показывать и скрывать элемент по клику. Поехали...
После объявления всего необходимого, сам листинг кода, который отвечает за показ и скрытие содержимого по клику будет выглядеть так:
<a href="" ng-click="showBlock = ! showBlock">Показать блок</a> <div ng-show="showBlock"> Здесь любое содержимое </div>
Все очень просто: по клику меняется состояние блока и убирается или добавляется класс ng-hide, который и скрывает блок.
Полный код страницы:
<!DOCTYPE html> <html ng-app="myApp"> <head> <title>Angular</title> <meta charset="utf-8"> <script src="angular.min.js"></script> <script> var myApp = angular.module("myApp", []); myApp.controller('myAppCtrl', function($scope) { }); </script> </head> <body ng-controller="myAppCtrl"> <a href="" ng-click="showBlock = ! showBlock">Показать блок</a> <div ng-show="showBlock"> Здесь любое содержимое </div> </body> </html>