angularjs初步(三)

事件

ng-click 定义了 AngularJS 点击事件。

< div ng-app="" ng-controller="myCtrl">

< button ng-click="count = count + 1">点我！</button>

< p>{{ count }}</p>

 < /div>

ng-show 显示 HTML 元素
ng-hide 隐藏 HTML 元素

< div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">>隐藏/显示</button>

< p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

< script>
var 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>

模块 angular.module

< div ng-app="myApp">...</div>

< script>

//在模块定义中 [] 参数用于定义模块的依赖关系。中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
var app = angular.module("myApp", []); 

</script>

添加控制器 用 ng-controller 指令来添加应用的控制器

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

< script>

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

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

</script>

表单

• 输入控件的集合

< div ng-app="myApp" ng-controller="formCtrl">
//novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证
  <form novalidate>
    First Name:<br>
    //ng-model 指令绑定了两个 input 元素到模型的 user 对象
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    //ng-click 指令调用了 reset() 方法，且在点击按钮时调用
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

< script>
var app = angular.module('myApp', []);
//formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

输入验证

• 表单和控件可以提供验证功能

< form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

< p>用户名:<br>
  < input type="text" name="user" ng-model="user" required>
  < span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  < span ng-show="myForm.user.$error.required">用户名是必须的。</span>
  </span>
</p>

< p>邮箱:<br>
  < input type="email" name="email" ng-model="email" required>
  < span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  < span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
  < span ng-show="myForm.email.$error.email">非法的邮箱。</span>
  </span>
< /p>

< p>
  < input type="submit"
   ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

< /form>

< script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
< /script>

API

• 比较、迭代、转换

angular.lowercase()	
angular.uppercase()	
angular.isString()	
angular.isNumber()

包含 ng-include

• 可以在 HTML 中包含 HTML 文件

< body ng-app="myApp" ng-controller="userCtrl">

< div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
< /div>

< /body>

动画 angular-animate.min.js ngAnimate

ngAnimate 监测事件,添加或移除 class

< body ng-app="myApp">
< h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

< div ng-hide="myCheck"></div>

< script>
var app = angular.module('myApp', ['ngAnimate']);
</script>


< style>
@keyframes myChange {
    from {
        height: 100px;
    } to {
        height: 0;
    }
}
div {
    height: 100px;
    background-color: lightblue;
}
div.ng-hide {
    animation: 0.5s myChange;
}
</style>