AngularJs 事件

ng-click指令：点击事件

    <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",设置元素不可见，隐藏状态；

ng-hide="false",设置元素可见；

ng-show="true",设置元素可见；

ng-show="false",设置元素不可见；

    <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模块：

模块定义了一个应用程序，是应用程序中的不同部分的容器，是应用控制器的容器；控制器通常属于一个模块。

创建模块--->添加控制器--->添加指令

模块和控制器均包含在JS文件中，页面导入部位应该在使用之前引入；

<!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.js

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

在模块定义中[]参数，是用于定义模块的依赖关系的。[]表示该模块没有依赖，如果有依赖的话，会在中括号写上依赖的模块名字。

myCtrl.js

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

 

posted @ 2017-06-01 17:41  老街_hehe  阅读(121)  评论(0)  编辑  收藏  举报