AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。
使用 ng-options 创建选择框
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例:
实例
<div ng-app="myApp" ng-controller="myCtrl">……继续阅读 »
2年前 (2022-07-28) 270浏览 0评论
0个赞
AngularJS 表单
AngularJS 表单是输入控件的集合。
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
数据绑定
Input 控件使用 ng-model 指令来实现数据绑定。
<input type="text" ng-model="firstname……继续阅读 »
2年前 (2022-07-26) 191浏览 0评论
0个赞
AngularJS 依赖注入
什么是依赖注入
wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是,它允……继续阅读 »
2年前 (2022-07-26) 291浏览 0评论
0个赞
AngularJS 应用
现在是时候创建一个真正的 AngularJS 单页 Web 应用(single page web application,SPA)了。
AngularJS 应用实例
您已经学习了足够多关于 AngularJS 的知识,现在可以开始创建您的第一个 AngularJS 应用程序:
我的笔记
保存
清除
剩余字数: 100
应用程序讲解
AngularJS 实例
<html n……继续阅读 »
2年前 (2022-07-18) 297浏览 0评论
0个赞
AngularJS 路由
本章节我们将为大家介绍 AngularJS 路由。
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页 Web 应用(single page web application,SPA)。
通常我们的 URL 形式为 http://runoob.com/first/page,但在单页 Web 应用中 AngularJS 通过 #!……继续阅读 »
2年前 (2022-06-27) 191浏览 0评论
0个赞
AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象,有可用的方法和属性。
Scope 可应用在视图和控制器上。
如何使用 Scope
当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:
AngularJS 实例
控制器中的属性对应了视图上的属性:
<d……继续阅读 »
2年前 (2022-06-25) 192浏览 0评论
0个赞
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
AngularJS 实……继续阅读 »
2年前 (2022-06-25) 163浏览 0评论
0个赞
AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
AngularJS 过滤器
AngularJS 过滤器可用于转换数据:
过滤器
描述
currency
格式化数字为货币格式。
filter
从数组项中选择一个子集。
lowercase
格式化字符串为小写。
orderBy
根据某个表达式排列数组。
uppercase
格式化字符串为大写。
表……继续阅读 »
2年前 (2022-06-21) 190浏览 0评论
0个赞
AngularJS SQL
在前面章节中的代码也可以用于读取数据库中的数据。
使用 PHP 从 MySQL 中获取数据
AngularJS 实例
<div ng-app=“myApp” ng-controller=“customersCtrl”>
<table> <tr
ng-repeat=“x in na……继续阅读 »
2年前 (2022-06-19) 182浏览 0评论
0个赞
AngularJS 参考手册
AngularJS 指令
本教程用到的 AngularJS 指令 :
指令
描述
ng-app
定义应用程序的根元素。
ng-bind
绑定 HTML 元素到应用程序数据
ng-bind-html
绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符
ng-bind-template
规定要使用模板替换的文本内容
ng……继续阅读 »
2年前 (2022-06-18) 157浏览 0评论
0个赞
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
在表格中显示数据
使用 angular 显示表格是非常简单的:
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootc……继续阅读 »
2年前 (2022-06-18) 236浏览 0评论
0个赞
AngularJS HTML DOM
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
AngularJS 实例
<div ng-app=“” ng-init=“mySwitch=true”>
<p……继续阅读 »
2年前 (2022-06-14) 155浏览 0评论
0个赞
AngularJS 表达式
AngularJS 使用 表达式 把数据绑定到 HTML。
AngularJS 表达式
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置”输出”数据。
AngularJS 表达式 很像 JavaSc……继续阅读 »
2年前 (2022-06-13) 293浏览 0评论
0个赞
AngularJS 指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
AngularJS 指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元……继续阅读 »
2年前 (2022-06-12) 240浏览 0评论
0个赞
AngularJS 动画
AngularJS 提供了动画效果,可以配合 CSS 使用。
AngularJS 使用动画需要引入 angular-animate.min.js 库。
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需在应用中使……继续阅读 »
2年前 (2022-06-09) 175浏览 0评论
0个赞
AngularJS 实例
实例
您可以在线编辑实例,然后点击按钮查看结果。
AngularJS 实例
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>……继续阅读 »
2年前 (2022-06-05) 277浏览 0评论
0个赞
AngularJS 教程
AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。
AngularJS 学习起来非常简单。
现在开始学习 AngularJS!
每个章节都有相应的实例
在每个章节中,您可以在线编辑实例,然后点击按钮查看结果。
AngularJS 实例
<!DOCTYPE h……继续阅读 »
3年前 (2022-06-05) 286浏览 0评论
0个赞
AngularJS XMLHttpRequest
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
使用格式:
// 简单的 GET 请求,可以改为 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function success……继续阅读 »
3年前 (2022-06-04) 131浏览 0评论
0个赞
AngularJS Bootstrap
AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。
查看 Bootstrap教程。
Bootstrap
你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码:
<link rel=”s……继续阅读 »
3年前 (2022-06-02) 245浏览 0评论
0个赞
AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务,或使用内建服务。
什么是服务?
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务,它可以返回当前页面的 URL 地址。
实例
var app = angular.module(‘myApp……继续阅读 »
3年前 (2022-05-28) 266浏览 0评论
0个赞
AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据。
输入验证
在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识。
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。
客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。
应用代码
<!DOCTYPE html><html>……继续阅读 »
3年前 (2022-05-28) 265浏览 0评论
0个赞
AngularJS API
API 意为 Application
Programming Interface(应用程序编程接口)。
AngularJS 全局 API
AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如:
比较对象
迭代对象
转换对象
全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数:
API
描述
an……继续阅读 »
3年前 (2022-05-28) 283浏览 0评论
0个赞
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
Angular……继续阅读 »
3年前 (2022-05-25) 356浏览 0评论
0个赞
AngularJS 包含
在 AngularJS 中,你可以在 HTML 中包含 HTML 文件。
在 HTML 中包含 HTML 文件
在 HTML 中,目前还不支持包含 HTML 文件的功能。
服务端包含
大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes)。
使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器。
PHP 实例
<?php……继续阅读 »
3年前 (2022-05-15) 325浏览 0评论
0个赞
AngularJS 事件
AngularJS 有自己的 HTML 事件指令。
ng-click 指令
ng-click
指令定义了 AngularJS 点击事件。
AngularJS 实例
<div ng-app=“” ng-controller=“myCtrl”>
<button ng-click=“count
= count + ……继续阅读 »
3年前 (2022-05-15) 309浏览 0评论
0个赞
AngularJS 模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
创建模块
你可以通过 AngularJS 的 angular.module 函数来创建模块:
<div ng-app=“myApp”>…</div>
<script>
var app = angular……继续阅读 »
3年前 (2022-05-15) 110浏览 0评论
0个赞
AngularJS ng-model 指令
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input,
select, textarea)的值。
ng-model 指令
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
AngularJS 实例
<div ng-app=“myApp” ng-controller=“myC……继续阅读 »
3年前 (2022-05-15) 261浏览 0评论
0个赞