Angularjs события
Angularjs имеет свою собственную директиву HTML Event.
ng-click Command
Директива NG-Click определяет событие AngularJs Click.
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <кнопка ng-click = "count = count + 1"> нажмите меня! </button> <p> {{count}} </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.count = 0;}); </script> </body> </html>Эффект бега:
0
Скрыть HTML -элементы
Директива ng-hide используется для установки того, видима ли часть приложения.
ng-hide = "true" устанавливает, что элемент HTML невидим.
ng-hide = "false" устанавливает элемент HTML, чтобы быть видимым.
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller="personCtrl"><button ng-click="toggle()">Hide/Show</button><p ng-hide="myVar">Name: <input type=text ng-model="firstName"><br>Name: <input type=text ng-model="lastName"><br><br>Name: {{firstName + " " + Lastname}} </p> </div> <script> var app = angular.module ('myApp', []); app.controller ('personctrl', function ($ scope) {$ scope.firstname = "john"; $ scope.lastname = "doe"; =! $ scope.myvar;Результаты работы:
имя:
фамилия:
Имя: Джон Доу
Анализ применения:
Первая часть PersonController аналогична главе контроллера.
Приложение имеет свойство по умолчанию: $ scope.myvar = false;
Директива ng-hide устанавливает, видны ли элемент <p> и два поля ввода, и устанавливает независимо от того, виден ли он в соответствии со значением myvar (true или false).
Функция Toggle () используется для переключения значений переменной myvar (true и false).
ng-hide = "true" делает элемент невидимым.
Отображать HTML -элементы
Директива NG-SHOW может быть использована для установления того, видима ли часть приложения.
ng-show = "false" может установить html-элементы невидимыми.
NG-SHOW = "true" может быть установлен для того, чтобы быть виден для HTML-элементов.
В следующем примере используется директива NG-SHOW:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "personctrl"> <button ng-click = "toggle ()"> скрыть/show </button> <p ng-shef = "myvar"> name: <input type = text ng-model = "person.firstname"> <br> name: <input ng-model = "lersaM.lastNam " + person.lastname}} </p> </div> <cript> var app = angular.module ('myApp', []); app.controller ('personctrl', function ($ scope) {$ scope.person = {firstname:" John ", Lastname:" doe "}; $ scope.myvar =! $ scope.myvar;Результаты работы:
имя:
фамилия:
Имя: Джон Доу
Выше приведено сборник информации о событиях AngularJS. Мы продолжим добавлять его позже. Для справки от нуждающихся друзей.