AngularJS?事件

---

AngularJS 有自己的 HTML 事件指令。

---

ng-click 指令

ng-click?指令定義了 AngularJS 點擊事件。

1. <div ng-app="" ng-controller="myCtrl">
3. <button ng-click="count = count + 1">點我！</button>
5. <p>{{ count }}</p>
7. </div>

結果：

---

隱藏 HTML 元素

ng-hide?指令用于設置應用部分是否可見。

ng-hide="true"?設置 HTML 元素不可見。

ng-hide="false"?設置 HTML 元素可見。

?

1. <div ng-app="myApp" ng-controller="personCtrl">
3. <button ng-click="toggle()">>隱藏/顯示</button>
5. <p ng-hide="myVar">
6. 名:<input type="text" ng-model="firstName"><br>
7. 姓名:<input type="text" ng-model="lastName"><br>
8. <br>
9. FullName:{{firstName +" "+ lastName}}
10. </p>
12. </div>
14. <script>
15. var app = angular.module('myApp',[]);
16. app.controller('personCtrl',function($scope){
17. $scope.firstName ="John",
18. $scope.lastName ="Doe"
19. $scope.myVar =false;
20. $scope.toggle =function(){
21. $scope.myVar =!$scope.myVar;
22. };
23. });
24. </script>

?

應用解析:

第一部分?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 指令:

?

1. <div ng-app="myApp" ng-controller="personCtrl">
3. <button ng-click="toggle()">隱藏/顯示</button>
5. <p ng-show="myVar">
6. 名:<input type="text" ng-model="firstName"><br>
7. 姓:<input type="text" ng-model="lastName"><br>
8. <br>
9. 姓名:{{firstName +" "+ lastName}}
10. </p>
12. </div>
14. <script>
15. var app = angular.module('myApp',[]);
16. app.controller('personCtrl',function($scope){
17. $scope.firstName ="John",
18. $scope.lastName ="Doe"
19. $scope.myVar =true;
20. $scope.toggle =function(){
21. $scope.myVar =!$scope.myVar;
22. }
23. });
24. </script>

?

轉載于:https://www.cnblogs.com/moyuling/p/5207269.html

總結

以上是生活随笔為你收集整理的【12】AngularJS 事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。