AngularJS学习笔记(二)

最新推荐文章于 2024-09-03 17:02:58 发布

dengchen5736

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/NatChen/p/9116832.html

版权

一.AngularJS Select(选择框)

1.使用 ng-options 创建选择框

</div>

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

app.controller('myCtrl', function($scope) {

$scope.names = ["Google", "Runoob", "Taobao"];

});

</script>

2.使用 ng-repeat 指令来创建下拉列表

</div>

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

app.controller('myCtrl', function($scope) {

$scope.names = ["Google", "Runoob", "Taobao"];

});

</script>

3. 使用了数组作为数据源: x 为键(key), y 为值(value)

<p>选择一辆车:</p>

<h1>你选择的是: {{selectedCar.brand}}</h1>

<h2>模型: {{selectedCar.model}}</h2>

<h3>颜色: {{selectedCar.color}}</h3>

<p>注意选中的值是一个对象。</p>

</div>

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

app.controller('myCtrl', function($scope) {

$scope.cars = {

car01 : {brand : "Ford", model : "Mustang", color : "red"},

car02 : {brand : "Fiat", model : "500", color : "white"},

car03 : {brand : "Volvo", model : "XC90", color : "black"}

} });

</script>

表格显示序号可以在 <td> 中添加 $index,

过滤器转换为大写: 使用 uppercase,

排序显示，可以使用 orderBy过滤器

style="{{$even?'background-color: #f1f1f1':''}}" 隔行变色

二.AngularJS HTML DOM

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

2.ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。

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

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

tips:AngularJS 在 <head> 元素中被加载,但也可以在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面

三.AngularJS API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合

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

四. AngularJS 包含

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

转载于:https://www.cnblogs.com/NatChen/p/9116832.html

dengchen5736

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习笔记(二)

一.AngularJS Select(选择框)1.使用 ng-options 创建选择框<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"...
复制链接

扫一扫