AngularJS 指令表达式应用

最新推荐文章于 2024-06-14 15:02:13 发布

abao7781

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量95

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nonameG/p/4984799.html

版权

AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。

ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

AngularJS Filters

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.

(（下面的两个实例，我们将使用前面章节中提到的 person 控制器）)

uppercase 过滤器将字符串格式化为大写：

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

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

currency 过滤器将数字格式化为货币格式：

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

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

orderBy 过滤器根据表达式排列数组：

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

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

<div>

filter 过滤器从数组中选择一个子集：

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

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
     <p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

</body>
</html>

AngularJS 应用

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

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

转载于:https://www.cnblogs.com/nonameG/p/4984799.html

abao7781

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 指令表达式应用

AngularJS 指令AngularJS 指令是以ng作为前缀的 HTML 属性。ng-app 指令ng-app指令定义了 AngularJS 应用程序的根元素。ng-app指令在网页加载完毕时会自动引导（自动初始化）应用程序。稍后您将学习到ng-app如何通过一个值（比如 ng-app="myModule"）连接到代码模块。ng-model 指令...
复制链接

扫一扫