AngularJS学习笔记5

11.AngularJS  HTML DOM

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

<button ng-disabled="mySwitch">点我!</button>

ng-show 指令隐藏或显示一个 HTML 元素。

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>

ng-hide 指令用于隐藏或显示 HTML 元素。

<div ng-app="">
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
</div>

12.AngularJS 事件

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

<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>

ng-hide 指令用于设置应用部分是否可见。

ng-hide="true" 设置 HTML 元素不可见。

ng-hide="false" 设置 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>

ng-show 指令可用于设置应用中的一部分是否可见 。

ng-show="false" 可以设置 HTML 元素 不可见。

ng-show="true" 可以以设置 HTML 元素可见。

AngularJS 包含

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:

13.AngularJS 模块

你可以通过 AngularJS 的 angular.module 函数来创建模块：

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []); 

</script>

 

14.AngularJS 表单

以下 HTML input 元素被称为 HTML 控件:

input 元素

select 元素

button 元素

textarea 元素

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

 

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

 

15.AngularJS API

API 意为 Application Programming Interface（应用程序编程接口）。

angular.lowercase()

angular.uppercase()

angular.isString()

angular.isNumber()