Angular学习笔记（1）

最新推荐文章于 2023-03-03 11:52:24 发布

置顶孤我不夜城

最新推荐文章于 2023-03-03 11:52:24 发布

阅读量484

点赞数

分类专栏： Angular 文章标签： Angular

本文链接：https://blog.csdn.net/weixin_44039165/article/details/91875047

版权

Angular 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
ng-init不常用，后面初始化数据都是放在控制器中

AngularJS 数字

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
//两种方式
<p>总价： <span ng-bind="quantity * cost"></span></p>
</div>

AngularJS 字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
 
<p>姓名： {{ firstName + " " + lastName }}</p>
//两种方式
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
 
</div>

AngularJS 对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
<p>姓为 {{ person.lastName }}</p>
<p>姓为 <span ng-bind="person.lastName"></span></p>
 
</div>
AngularJS 数组
<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三个值为 {{ points[2] }}</p>
<p>第三个值为 <span ng-bind="points[2]"></span></p>
 
</div>

AngularJS 表达式与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

AngularJS 指令

ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
ng-model 指令
ng-model 指令绑定 HTML 元素到应用程序数据。

ng-model指令也可以：为应用程序数据提供类型验证（number、email、required）。为应用程序数据提供状态（invalid、dirty、touched、error）。为HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

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

    名字: <input ng-model="name">
</div>

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

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>
验证用户输入
<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>状态</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

ng-model 指令根据表单域的状态添加/移除以下类： ng-empty ng-not-empty ng-touched
ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。创建自定义的指令你可以使用 .directive
函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令，
runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

你可以通过以下方式来调用指令：

元素名    	<runoob-directive></runoob-directive>
属性		<div runoob-directive></div>
类名		<div class="runoob-directive"></div>
注释		<!-- directive: runoob-directive -->

限制使用

你可以限制你的指令只能通过特定的方式来调用。通过添加 restrict 属性,并设置值为 “A”, 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:

E 作为元素名使用 A 作为属性使用
C 作为类名使用 M 作为注释使用
restrict 默认值为 EA,
即可以通过元素名和属性名来调用指令。

ng-disabled 指令

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

<div ng-app="" ng-init="mySwitch=true">

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

<input type="checkbox" ng-model="mySwitch">按钮

{{ mySwitch }}
</div>

实例讲解：

ng-disabled 指令绑定应用程序数据 “mySwitch” 到 HTML 的 disabled 属性。
ng-model 指令绑定"mySwitch" 到 HTML input checkbox 元素的内容（value）。

如果 mySwitch 为true, 按钮将不可用:

<button disabled>点我！</button>
如果 mySwitch 为false, 按钮则可用: 
<button>点我!</button>
ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。
你可以使用表达式来计算布尔值（ true 或 false）:
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">我是可见的。</p>
</div>

ng-hide 指令

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

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

指令描述

ng-app 定义应用程序的根元素。
ng-bind 绑定 HTML 元素到应用程序数据
ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template 规定要使用模板替换的文本内容
ng-blur 规定 blur 事件的行为
ng-change 规定在内容改变时要执行的表达式
ng-checked 规定元素是否被选中
ng-class 指定 HTML 元素使用的 CSS 类
ng-class-even 类似 ng-class，但只在偶数行起作用
ng-class-odd 类似 ng-class，但只在奇数行起作用
ng-click 定义元素被点击时的行为
ng-cloak 在应用正要加载时防止其闪烁
ng-controller 定义应用的控制器对象
ng-copy 规定拷贝事件的行为 ng-csp
修改内容的安全策略 ng-cut 规定剪切事件的行为
ng-dblclick 规定双击事件的行为
ng-disabled 规定一个元素是否被禁用
ng-focus 规定聚焦事件的行为
ng-form 指定 HTML 表单继承控制器表单

以及

ng-hide 隐藏或显示HTML 元素
ng-href 为 the 元素指定链接
ng-if 如果条件为 false 移除HTML 元素
ng-include 在应用中包含 HTML 文件
ng-init 定义应用的初始化值
ng-jq定义应用必须使用到的库，如：jQuery ng-keydown 规定按下按键事件的行为
ng-keypress 规定按下按键事件的行为
ng-keyup 规定松开按键事件的行为
ng-list 将文本转换为列表 (数组)
ng-model 绑定 HTML 控制器的值到应用数据
ng-model-options 规定如何更新模型
ng-mousedown 规定按下鼠标按键时的行为
ng-mouseenter规定鼠标指针穿过元素时的行为
ng-mouseleave 规定鼠标指针离开元素时的行为
ng-mousemove规定鼠标指针在指定的元素中移动时的行为
ng-mouseover 规定鼠标指针位于元素上方时的行为
ng-mouseup 规定当在元素上松开鼠标按钮时的行为
ng-non-bindable 规定元素或子元素不能绑定数据
ng-open 指定元素的 open 属性
ng-options 在列表中指定
ng-paste 规定粘贴事件的行为
ng-pluralize根据本地化规则显示信息
ng-readonly 指定元素的 readonly 属性
ng-repeat 定义集合中每项数据的模板
ng-selected 指定元素的 selected 属性
ng-show 显示或隐藏 HTML 元素 ng-src 指定元素的 src 属性
ng-srcset 指定元素的 srcset 属性
ng-style 指定元素的 style 属性
ng-submit 规定 onsubmit 事件发生时执行的表达式
ng-switch 规定显示或隐藏子元素的条件
ng-transclude 规定填充的目标位置
ng-value 规定 input 元素的值

AngularJS 事件

AngularJS 支持以下事件:

ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change
ng-click 指令
ng-click 指令定义了

AngularJS 点击事件。

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

隐藏 HTML 元素

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

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

ng-hide=“false” 设置 HTML 元素可见。

显示 HTML 元素

ng-show 指令可用于设置应用中的一部分是否可见。
ng-show=“false” 可以设置 HTML 元素不可见。
ng-show=“true” 可以以设置 HTML 元素可见。

以下实例使用了 ng-show 指令:

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

应用解析:

第一部分 personController与控制器章节类似。
应用有一个默认属性: $scope.myVar = false;
ng-hide 指令设置 p元素及两个输入域是否可见，根据 myVar 的值 (true 或 false) 来设置是否可见。
toggle() 函数用于切换 myVar 变量的值（true 和 false）。 ng-hide=“true” 让元素不可见。

AngularJS 验证属性

$dirty
$invalid
$error

AngularJS 全局 API / 转换

API 描述
angular.lowercase() 将字符串转换为小写
angular.uppercase() 将字符串转换为大写
angular.copy() 数组或对象深度拷贝
angular.forEach() 对象或数组的迭代函数

比较
API 描述

angular.isArray() 如果引用的是数组返回 true
angular.isDate() 如果引用的是日期返回 true
angular.isDefined() 如果引用的已定义返回 true
angular.isElement() 如果引用的是 DOM元素返回 true
angular.isFunction() 如果引用的是函数返回 true
angular.isNumber()如果引用的是数字返回 true
angular.isObject() 如果引用的是对象返回 true
angular.isString()如果引用的是字符串返回 true
angular.isUndefined() 如果引用的未定义返回 true
angular.equals() 如果两个对象相等返回 true

JSON
API 描述

angular.fromJson() 反序列化 JSON 字符串
angular.toJson() 序列化 JSON 字符串

基础
API 描述

angular.bootstrap() 手动启动 AngularJS

angular.element() 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。

angular.module() 创建，注册或检索 AngularJS 模块

AngularJS 控制器
AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

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

应用解析：

AngularJS 应用程序由 ng-app 定义。应用程序在 div 内运行。
ng-controller=“myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
控制器方法
上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法（变量和函数）：

> <div ng-app="myApp" ng-controller="personCtrl">
> 
> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text"
> ng-model="lastName"><br> <br> 姓名: {{fullName()}}
> 
> </div>
> 
> <script> var app = angular.module('myApp', []);
> app.controller('personCtrl', function($scope) {
>     $scope.firstName = "John";
>     $scope.lastName = "Doe";
>     $scope.fullName = function() {
>         return $scope.firstName + " " + $scope.lastName;
>     } }); </script>

外部文件中的控制器
在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把

表达式中添加过滤器

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

uppercase 过滤器将字符串格式化为大写：
<p>姓名为 {{ lastName | uppercase }}</p>

lowercase 过滤器将字符串格式化为小写：
<p>姓名为 {{ lastName | lowercase }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>
currency 过滤器
<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
currency 过滤器将数字格式化为货币格式：
<p>总价 = {{ (quantity * price) | currency }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>

向指令添加过滤器

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

<ul>
orderBy 过滤器根据表达式排列数组：
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>

过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

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

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

<ul>

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

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

</div>
<script>
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>

自定义过滤器
以下实例自定义一个过滤器 reverse，将字符串反转：

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

姓名: {{ msg | reverse }}

</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});
//运行结果：boonuR

过滤器相关
1、uppercase，lowercase 大小写转换

{{ "lower cap string" | uppercase }}   // 结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}      // 结果：tank is good

2、date 格式化

{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

3、number 格式化（保留小数）

{{149016.1945000 | number:2}}

4、currency货币格式化

{{ 250 | currency }}            // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }}  // 结果：RMB ￥ 250.00

5、filter查找
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集

 // 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}

6、limitTo 截取

{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

7、orderBy 排序

// 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}

// 根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}

实例

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
    </head>
    <body>
       
    <div  ng-app="">
    <p>1、uppercase，lowercase 大小写转换</p>
    {{ "lower cap string" | uppercase }}<br>   
    {{ "TANK is GOOD" | lowercase }}  
    
    <p>2、date 格式化</p>
    {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}
      
    <p>3、number 格式化（保留小数）</p>
    {{149016.1945000 | number:2}}
    
    <p>4、currency货币格式化</p>
    {{ 250 | currency }} <br>
    {{ 250 | currency:"RMB ￥ " }}
    
    <p>5、filter查找</p>
    <p>查找name为iphone的行</p>
    {{ [{"age": 20,"id": 10,"name": "iphone"},
    {"age": 12,"id": 11,"name": "sunm xing"},
    {"age": 44,"id": 12,"name": "test abc"}
    ] | filter:{'name':'iphone'} }}   
    
    <p>6、limitTo 截取</p>
    {{"1234567890" | limitTo :6}}<br>
    {{"1234567890" | limitTo:-4}}
      
    <p>7、orderBy 排序</p>
    <p>根id降序排</p>
    {{ [{"age": 20,"id": 10,"name": "iphone"},
    {"age": 12,"id": 11,"name": "sunm xing"},
    {"age": 44,"id": 12,"name": "test abc"}
    ] | orderBy:'id':true }}
      
    <p>根据id升序排</p>
    {{ [{"age": 20,"id": 10,"name": "iphone"},
    {"age": 12,"id": 11,"name": "sunm xing"},
    {"age": 44,"id": 12,"name": "test abc"}
    ] | orderBy:'id' }}
    </div>
    </body>
    </html>

AngularJS 服务(Service)

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。 AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。
实例：

<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

为什么使用服务?

在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但
window.location 对象在 AngularJS 应用中有一定的局限性。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location
对象更好。

** $l o c a t i o n * * v s * * w i n d o w . l o c a t i o n * * w i n d o w . l o c a t i o n / /$ location.service 目的允许对当前浏览器位置进行读写操作允许对当前浏览器位置进行读写操作
API 暴露一个能被读写的对象暴露jquery风格的读写器
是否在AngularJS应用生命周期中和应用整合否可获取到应用生命周期内的每一个阶段，并且和 $w a t c h 整合是否和 H T M L 5 A P I 的无缝整合否是（对低级浏览器优雅降级）和应用的上下文是否相关否， w i n d o w . l o c a t i o n . p a t h 返回 " / d o c r o o t / a c t u a l / p a t h " 是，$ location.path()返回"/actual/path"

$http 服务

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

实例
使用 $http 服务向服务器请求数据:

<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
实例

<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。
实例

每一秒显示信息
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务

你可以创建自定义服务，链接到你的模块中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>
</body>
</html>

AngularJS Select(选择框)

使用 ng-options 创建选择框
使用 ng-options指令，选择的值是一个对象：当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

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

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

ng-options 使用对象有很大的不同，如下所示：
实例

使用对象作为数据源, x 为键(key), y 为值(value):

你选择的值为在 key-value 对中的 value。 value 在 key-value 对中也可以是个对象：

你选择的值是: {{selectedSite}}

你选择的值为在 key-value 对中的 value。 value 在 key-value 对中也可以是个对象：

实例
选择的值在 key-value 对的 value 中, 这是它是一个对象:

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

我们也可以使用ng-repeat 指令来创建下拉列表：ng-repeat 有局限性，选择的值是一个字符串:
ng-repeat指令是通过数组来循环 HTML 代码来创建下拉列表，
但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用ng-options 的选项是一个对象， ng-repeat 是一个字符串。

<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
<p>该实例演示了使用 ng-repeat 指令来创建下拉列表。

孤我不夜城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular学习笔记（1）

Angular学习笔记（1）AngularJS 表达式AngularJS 表达式写在双大括号内：{{ expression }}。AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。AngularJS 将在表达式书写的位置"输出"数据。AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。ng-init不...
复制链接

扫一扫