ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

HoRain云--AngularJS 事件

HoRain云--AngularJS 事件 AngularJS 有自己的 HTML 事件指令。ng-click 指令ng-click指令定义了 AngularJS 点击事件。AngularJS 实例div ng-app ng-controllermyCtrlbutton ng-clickcount count 1点我/buttonp{{ count }}/p/div隐藏 HTML 元素ng-hide指令用于设置应用部分是否可见。ng-hidetrue设置 HTML 元素不可见。ng-hidefalse设置 HTML 元素可见。AngularJS 实例div ng-appmyApp ng-controllerpersonCtrlbutton ng-clicktoggle()隐藏/显示/buttonp ng-hidemyVar名: input typetext ng-modelfirstNamebr姓名: input typetext ng-modellastNamebrbrFull Name: {{firstName lastName}}/p/divscriptvar app angular.module(myApp, []);app.controller(personCtrl, function($scope) {$scope.firstName John,$scope.lastName Doe$scope.myVar false;$scope.toggle function() {$scope.myVar !$scope.myVar;};});/script应用解析:第一部分personController与控制器章节类似。应用有一个默认属性:$scope.myVar false;ng-hide指令设置 p元素及两个输入域是否可见 根据myVar的值 (true 或 false) 来设置是否可见。toggle()函数用于切换myVar变量的值true 和 false。ng-hidetrue让元素不可见。显示 HTML 元素ng-show指令可用于设置应用中的一部分是否可见。ng-showfalse可以设置 HTML 元素不可见。ng-showtrue可以以设置 HTML 元素可见。以下实例使用了 ng-show 指令:AngularJS 实例div ng-appmyApp ng-controllerpersonCtrlbutton ng-clicktoggle()隐藏/显示/buttonp ng-showmyVar名: input typetext ng-modelfirstNamebr姓: input typetext ng-modellastNamebrbr姓名: {{firstName lastName}}/p/divscriptvar app angular.module(myApp, []);app.controller(personCtrl, function($scope) {$scope.firstName John,$scope.lastName Doe$scope.myVar true;$scope.toggle function() {$scope.myVar !$scope.myVar;}});/script
返回列表