21、AngularJs知识点总结 part-3

1、选择框select

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，也可以使用ng-repeat 指令来创建下拉列表：

区别：ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

<div class=" container">
<div ng-app="myApp" ng-controller="ctl">
<select ng-model="selectName" ng-options="x for x in list">
</select>
<br/>
<br/>
<select>
<option ng-repeat="x in list">{{x}}</option>
</select>

<br/>
<br/>
<!-- 使用ng-options得到selectedsite是一个对象-->
<select ng-model='selectedsite' ng-options="x.site for x in sites"></select>

<br/>
<br/>
<!-- 使用ng-repeat只能得到url这样的字符串-->
<select ng-model="selectedSite">
<option ng-repeat="x in sites">{{x.url}}</option>
</select>

</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('ctl', function ($scope) {
$scope.list = ['hello', 'nihao', 'salaheiyou']
$scope.sites = [
{site: "Google", url: "http://www.google.com"},
{site: "Runoob", url: "http://www.runoob.com"},
{site: "Taobao", url: "http://www.taobao.com"}
];
});

</script>

2、表格

<div class=" container">
<div ng-app="myApp" ng-controller="ctl">
<table>
<tr ng-repeat="siteSelected in sites | orderBy:'url' ">

<td>
{{$index+1}}
</td>

<td>
<b>
{{siteSelected.site|uppercase}}
</b>
</td>

<td>
{{siteSelected.url}}
</td>

<td ng-if="$even" style="color: red">
偶数
</td>

<td ng-if="$odd" style="color:blue">
奇数
</td>

</tr>

</table>
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('ctl', function ($scope) {
$scope.list = ['hello', 'nihao', 'salaheiyou']
$scope.sites = [
{site: "Taobao", url: "http://www.taobao.com"},
{site: "Google", url: "http://www.google.com"},
{site: "Runoob", url: "http://www.runoob.com"}
];
});

</script>

table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}

3、SQL、HTML DOM、事件

<div class=" container">
<div ng-app="myApp" ng-controller="ctl">

<!-- 设置是否可点击，点击状态取决于mySwitch这个值-->
<button ng-disabled="mySwitch">
点我
</button>

<!-- mySwtich这个值是checkbox的选中状态-->
<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>

<!-- 显示选中状态-->
<p>
{{mySwitch}}
</p>

<!-- 是否可见-->
<p ng-hide="false"> 可见 </p>

<p ng-hide="true"> 不可见 </p>

<!-- 设置点击事件-->
<button ng-click="count=count+1">点我加1</button>
{{count}}

<!-- 隐藏/显示一个按钮-->
<br>
<br>
<button ng-click="toggle()">隐藏/显示</button>
<p ng-show="myVar">看我72变</p>
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('ctl', function ($scope) {
$scope.count = 0;
$scope.myVar = true;
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
}
});

</script>

4、 模块

模块定义了一个应用程序，控制器通常属于一个模块

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

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

<script>

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

</script>

"myApp" 参数对应执行应用的 HTML 元素。

可以使用 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>

自定义指令



JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题

什么时候载入库？

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题

7、表单

<!--ng-app 指令定义了 AngularJS 应用 ng-controller 指令定义了应用控制器。-->
<!-- formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。-->

<div ng-app="myApp" ng-controller="formCtrl">
<!--novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证-->
<!-- novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 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', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
//        reset() 方法设置了 user 对象等于 master 对象。
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>

8、输入验证

<!--$dirty    表单有填写记录-->
<!--$valid    字段内容合法的-->
<!--$invalid    字段内容是非法的-->
<!--$pristine    表单没有填写记录-->
<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>

9、API

angular.lowercase()	转换字符串为小写
angular.uppercase()	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{'original:'+x1}}</p>
<p>{{'xiaoxie:'+ x2 }}</p>
<p>{{'daxie:'+ x3 }}</p>
<p>{{'isnumber:'+ x4 }}</p>
<p>{{'isString:'+ x5 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "John";
$scope.x2 = angular.lowercase($scope.x1);
$scope.x3 = angular.uppercase($scope.x1);
$scope.x4 = angular.isNumber($scope.x1);
$scope.x5 = angular.isString($scope.x1);
});
</script>

10、包含

11、动画