AngularJs 事件

時間 2019-11-10

原文原文鏈接

ng-click指令：點擊事件html

    <div ng-app="myApp" ng-controller="myCtrl">
        <button ng-click="count=count + 1;">自增</button>
        <p>{{count}}</p>
    </div>
    <script>    
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.count = 1;
        })
    </script>

ng-hide="true",設置元素不可見，隱藏狀態；app

ng-hide="false",設置元素可見；ide

ng-show="true",設置元素可見；spa

ng-show="false",設置元素不可見；code

    <div ng-app="myApp" ng-controller="myCtrl">
        <button ng-click="count=count + 1;">自增</button>
        <button ng-click="toggle();">顯隱</button>
        <p ng-hide="flag">{{count}}</p>
    </div>
    <script>    
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.count = 1;
            $scope.flag = false;
            $scope.toggle = function () {
                $scope.flag = !$scope.flag;
            }
        })
    </script>

AngularJs模塊：htm

模塊定義了一個應用程序，是應用程序中的不一樣部分的容器，是應用控制器的容器；控制器一般屬於一個模塊。blog

建立模塊--->添加控制器--->添加指令事件

模塊和控制器均包含在JS文件中，頁面導入部位應該在使用以前引入；ip

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

myApp.jsio

var app = angular.module("myApp",[]);

在模塊定義中[]參數，是用於定義模塊的依賴關係的。[]表示該模塊沒有依賴，若是有依賴的話，會在中括號寫上依賴的模塊名字。

myCtrl.js

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。