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";
});