七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX - 文章 - 伯乐在线
& 七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX
这是＂AngularJS – 七步从菜鸟到专家＂系列的第三篇。
在，我们展示了如何开始搭建一个AngularaJS应用。我们讨论了scope和 $scope 的功能。
通过这整个系列的教程，我们会开发一个NPR（美国全国公共广播电台）广播的音频播放器，它能显示Morning Edition节目里现在播出的最新故事，并在我们的浏览器里播放。完成版的Demo可以看。
第三部分 数据绑定
通过把一个文本输入框绑定到person.name属性上，就能把我们的应用变得更有趣一点。这一步建立起了文本输入框跟页面的双向绑定。
在这个语境里“双向”意味着如果view改变了属性值，model就会“看到”这个改变，而如果model改变了属性值，view也同样会“看到”这个改变。Angular.js 为你自动搭建好了这个机制。如果你好奇这具体是怎么实现的，请看我们之后推出的一篇文章，其中深入讨论了digest_loop 的运作。
要建立这个绑定，我们在文本输入框上使用ng-model 指令属性，像这样：
JavaScript
&div ng-controller="MyController"&
&input type="text" ng-model="person.name" placeholder="Enter your name" /&
&h5&Hello {{ person.name }}&/h5&
&div ng-controller="MyController"&&&&input type="text" ng-model="person.name" placeholder="Enter your name" /&&&&h5&Hello {{ person.name }}&/h5&&/div&
现在我们建立好了一个数据绑定（没错，就这么容易），来看看view怎么改变model吧：
当你在文本框里输入时，下面的名字也自动随之改变，这就展现了我们数据绑定的一个方向：从view到model。
我们也可以在我们的（客户端）后台改变model，看这个改变自动在前端体现出来。要展示这一过程，让我们在
MyController 的model里写一个计时器函数， 更新 $scope 上的一个数据。下面的代码里，我们就来创建这个计时器函数，它会在每秒计时（像钟表那样），并更新 $scope 上的clock变量数据：
JavaScript
app.controller('MyController', function($scope) {
$scope.person = { name: "Ari Lerner" };
var updateClock = function() {
$scope.clock = new Date();
var timer = setInterval(function() {
$scope.$apply(updateClock);
updateClock();
12345678910
app.controller('MyController', function($scope) {&&$scope.person = { name: "Ari Lerner" };&&var updateClock = function() {&&&&$scope.clock = new Date();&&};&&var timer = setInterval(function() {&&&&$scope.$apply(updateClock);&&}, 1000);&&updateClock();});
可以看到，当我们改变model中clock变量的数据，view会自动更新来反映此变化。用大括号我们就可以很简单地让clock变量的值显示在view里：
JavaScript
&div ng-controller="MyController"&
&h5&{{ clock }}&/h5&
&div ng-controller="MyController"&&&&h5&{{ clock }}&/h5&&/div&
{{ clock }}
前面我们把数据绑定在了文本输入框上。请注意， 数据绑定并非只限于数据，我们还可以利用绑定调用 $scope 中的函数（这一点之前已经提到过）。
对按钮、链接或任何其他的DOM元素，我们都可以用另一个指令属性来实现绑定：ng-click 。这个 ng-click 指令将DOM元素的鼠标点击事件（即 mousedown 浏览器事件）绑定到一个方法上，当浏览器在该DOM元素上鼠标触发点击事件时，此被绑定的方法就被调用。跟上一个例子相似，这个绑定的代码如下：
JavaScript
&div ng-controller="DemoController"&
&h4&The simplest adding machine ever&/h4&
&button ng-click="add(1)" class="button"&Add&/button&
&button ng-click="subtract(1)" class="button"&Subtract&/button&
&h4&Current count: {{ counter }}&/h4&
&div ng-controller="DemoController"&&&&h4&The simplest adding machine ever&/h4&&&&button ng-click="add(1)" class="button"&Add&/button&&&&button ng-click="subtract(1)" class="button"&Subtract&/button&&&&h4&Current count: {{ counter }}&/h4&&/div&
不论是按钮还是链接都会被绑定到包含它们的DOM元素的controller所有的 $scope 对象上，当它们被鼠标点击，Angular就会调用相应的方法。注意当我们告诉Angular要调用什么方法时，我们将方法名写进带引号的字符串里。
app.controller('DemoController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += };
$scope.subtract = function(amount) { $scope.counter -= };
app.controller('DemoController', function($scope) {&&$scope.counter = 0;&&$scope.add = function(amount) { $scope.counter += amount; };&&$scope.subtract = function(amount) { $scope.counter -= amount; };});
myApp中的数据绑定和AJAX
在上一篇的例子中，我们对view的一个按钮进行了刚才学到的数据绑定，给play按钮绑定了 PlayerController 的play方法（同样的，还给stop按钮绑定了stop方法）。
在上一篇教程里，我们引用的是一个存储在本地的音频文件，它给我们的是一个静态的NPR文件，而不是一个动态的NPR feed。在我们的NPR应用里，我们将用$http 来填充我们可播放的新闻文件的列表。
Angular.js原生支持AJAX，由此我们就获得了与一个或多个服务器来回发送请求的能力。这个能力对我们要创建的这种客户端应用来说是至关重要的，因为这种应用需要跟服务器交流，获取和更新数据。
Angular.js通过一个服务来支持AJAX（在之后的章节我们会讨论这个服务），这个服务就叫做 $http 服务。
所有Angular.js的核心服务都用 $ 前缀，这点在之前的 $scope
服务里我们已经见过了。
这个 $http 服务极其灵活，给了我们很多种方式来调用AJAX服务。为保证本教程简单易懂，我们专注于最简单的方式。在以后更高级的章节里我们会深入介绍 $http 服务。
在深入过多细节之前，让我们先来用 $http 服务创建一个请求：
method: 'JSONP',
url: '/v1/beers.json?callback=JSON_CALLBACK'
}).success(function(data, status, headers, config) {
// data contains the response
// status is the HTTP status
// headers is the header getter function
// config is the object that was used to create the HTTP request
}).error(function(data, status, headers, config) {
12345678910
$http({&&method: 'JSONP',&&url: '/v1/beers.json?callback=JSON_CALLBACK'}).success(function(data, status, headers, config) {&&// data contains the response&&// status is the HTTP status&&// headers is the header getter function&&// config is the object that was used to create the HTTP request}).error(function(data, status, headers, config) {});
$http 服务是Angular.js的核心服务之一，它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。
注意， 像上面例子中那样，原封不动加上以下字符串 callback=JSON_CALLBACK ，Angular.js就会负责为你处理JSONP请求，将 JSON_CALLBACK 替换成一个合适的回调函数。
$http 服务是这样一个函数：它接受一个设置对象，其中指定了如何创建HTTP请求；它将返回一个承诺（*参考JavaScript异步编程的promise模式），其中提供两个方法： success方法和error方法。
要取得可播放的音频文件列表，让我们向NPR的API发送一个请求。首先，你需要倒NPR注册以取得一个API key。到它们的网站
去。（作者在这里用Angular.js做了一个用iFrame加载的NPR注册表单，见下图，或者直接前往英文原文查看）。
记下你的API key，我们马上就会用到它。现在我们要设置我们的PlayController 来调用 $http 服务，取回音频文件。
像我们刚才做的那样，让我们调用 $http 服务来创建一个请求，这一次是为了取得所有音频文件。我们想让这个服务在controller实例化时启动，所以我们只需要把这个方法直接放在controller函数里（这个函数在controller被创建时就会被调用），像这样：
JavaScript
var apiKey = 'YOUR_KEY',
nprUrl = 'http://api.npr.org/query?id=61&fields=relatedLink,title,byline,text,audio,image,pullQuote,all&output=JSON';
app.controller('PlayerController', function($scope, $http) {
// Hidden our previous section's content
// construct our http request
method: 'JSONP',
url: nprUrl + '&apiKey=' + apiKey + '&callback=JSON_CALLBACK'
}).success(function(data, status) {
// Now we have a list of the stories (data.list.story)
// in the data object that the NPR API
// returns in JSON that looks like:
// data: { "list": {
"title": ...
"story": [
{ "id": ...
"title": ...
}).error(function(data, status) {
// Some error occurred
12345678910111213141516171819202122
var apiKey = 'YOUR_KEY',&&&&nprUrl = 'http://api.npr.org/query?id=61&fields=relatedLink,title,byline,text,audio,image,pullQuote,all&output=JSON';&app.controller('PlayerController', function($scope, $http) {&&// Hidden our previous section's content&&// construct our http request&&$http({&&&&method: 'JSONP',&&&&url: nprUrl + '&apiKey=' + apiKey + '&callback=JSON_CALLBACK'&&}).success(function(data, status) {&&&&// Now we have a list of the stories (data.list.story)&&&&// in the data object that the NPR API &&&&// returns in JSON that looks like:&&&&// data: { "list": {&&&&//&& "title": ...&&&&//&& "story": [&&&&//&&&& { "id": ...&&&&//&&&&&& "title": ...&&}).error(function(data, status) {&&&&// Some error occurred&&});});
现在我们在success函数的data里有了一个音频文件的列表。在success回调函数里，把这个列表存储在 $scope 对象，这样我们就简单地把它绑定在了 $scope 对象上：
JavaScript
// from above
}).success(function(data, status) {
// Store the list of stories on the scope
// from the NPR API response object (described above)
$scope.programs = data.list.
}).error(function(data, status) {
// Some error occurred
// from above}).success(function(data, status) {&&// Store the list of stories on the scope&&// from the NPR API response object (described above)&&$scope.programs = data.list.story;}).error(function(data, status) {&&// Some error occurred
现在，跟刚才一样， 只需在view里访问programs，我们就能在view里访问这个data。你看，使用Angular.js的一个好处就是，当承诺模式返回成功结果时，Angular.js就会自动把这个结果填进你的view里。
JavaScript
&div ng-controller="PlayerController"&
{{ programs }}
&div ng-controller="PlayerController"&{{ programs }}&/div&
在下一章里，我们会讨论怎么在我们的view里有意义地展示这个data对象，使用一些Angular.js自带的指令（和更多的一点什么）。
本系列的官方代码库可从github上下载：
要将这个代码库保存到本地，请先确保安装了git，clone此代码库，然后check out其中的part3分支：
git clone /auser/ng-newsletter-beginner-series.git
git checkout -b part3
git clone https:///auser/ng-newsletter-beginner-series.gitgit checkout -b part3
关于作者：
可能感兴趣的话题
赞！作者这一系列都不错哦
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线ANGULARJS中用NG-BIND指令实现单向绑定的例子
投稿：junjie
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了ANGULARJS中用NG-BIND指令实现单向绑定的例子,本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以参考下
本文简单介绍AngularJS框架后，用一个实例演示{{}}插值法和ng-bind指令的使用。
不同于jquery只是一个加强和简化前端开发的类库，angularjs是一个完整web前端框架，所以学习曲线高了很多。
angularjs给我的感觉类似于Java的Spring框架，处于中心容器位置粘合其他组件，其内置的很多组件已经可以满足一般场景，特殊场景我们可以按照框架思路扩展。
下面从最基础的内容走起：
&!DOCTYPE html&
&html ng-app&
&&& &meta charset="utf-8"&
&&& &title&ng-bind directive&/title&
&body ng-controller="HelloController"&
&&& &p&直接输出字符串字面值&/p&
&&& Hello {{"World"}}
&&& &p&使用占位符输出变量&/p&
&&& Hello {{greeting}}
&&& &p&使用ng-bind指令输出变量&/p&
&&& Hello &span ng-bind="greeting"&&/span&
&script src="../lib/angularjs/1.2.26/angular.min.js"&&/script&
&&& function HelloController($scope) {
&&&&&&& $scope.greeting = "World";
ng-app声明一个angularjs的模块，并限定在声明html标签的范围内。
ng-controller是在模块中声明一个angularjs的控制器，控制器可以有多个，但上下文是隔离的，应尽可能缩小控制器的作用范围。
{{}}是angularjs的插值语法，类似于JSP的EL表达式${}。第一个输出因为”World”是个字面值，程序会直接输出；第二个输出因为greeting是在控制器里定义的一个变量，所以也会输出变量对应的值，一样是World；第三个输出利用了angularjs内置的ng-bind属性指令，最终结果等价于{{}}，但注意指令=后面是字符串，不要写错。
js里面的HelloController和body上面的指令对应，入参$scope是框架提供的一个服务，代表当前控制器的上下文，还有其他类似服务，框架会自动注入，以后慢慢了解。方法体只有一行，是在$scope上定义了一个变量，就是html代码里引用的变量。
这一篇很简单，代码复制了就能运行。注意angular.min.js是1.2分支最新的版本，同样的代码用1.3.0版本无法运行，原因未知，可能1.3.0还不是最终Release版本有关。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具angular-ngSanitize模块-$sanitize服务详解
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.
要学习这个服务,先要了解另一个指令: ng-bing-html.
顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html().
但是,出于安全考虑,如果我们直接使用ng-bind-html是会报错的,ng-bind-html后面的内容必须经过一定的处理.
处理的方式有两种,一种是使用$sce服务,另一种就是使用$sanitize服务.$sce服务怎么用,在以后的文章中会独立讲解,这篇主要讲解$sanitize服务.
$sanitize会根绝一个白名单来净化html标签.这样,不安全的内容就不会被返回. 白名单是根据$compileProvider的aHrefSanitizationWhitelist和imgSrcSanitizationWhitelist函数得到的.&
看一个栗子:
&!DOCTYPE html&
&html ng-app="myApp"&
&title&&/title&
&meta charset="utf-8"&
&script src="../angular-1.3.2.js"&&/script&
&script src="angular-sanitize.min.js"&&/script&
&script src="script.js"&&/script&
&link type="text/css" href="../bootstrap.css" rel="stylesheet" /&
&div class="container"&
&table class="table table-bordered" ng-controller="ctrl"&
&caption&通过ngSanitize模块的$sanitize服务解析html&/caption&
&th&使用的指令&/th&
&th&格式化方法&/th&
&th&指令的写法&/th&
&th&解析结果&/th&
&td&ng-bind-html&/td&
&td&使用内置的$sanitize &br/&(不需要出现在js里,只要模型添加了ngSanitize模块, &br/&然后使用ng-bind-html,它的值就自动通过$sanitize编译)&/td&
&td&&pre&&div ng-bind-html="myHtml"&&br&&/div&&/pre&&/td&
&td&&div ng-bind-html="myHtml"&&/div&&/td&
&td&ng-bind-html&/td&
&td&使用$sce的trustAsHtml方法编译&br/&(以后会细讲$sce服务,这里不是重点)&/td&
&td&&pre&&div ng-bind-html="trustHtml"&&br&&/div&&/pre&&/td&
&td&&div ng-bind-html="trustHtml"&&/div&&/td&
&td&ng-bind&/td&
&td&不编译&/td&
&td&&pre&&div ng-bind="myHtml"&&br&&/div&&/pre&&/td&
&td&&div ng-bind="myHtml"&&/div&&/td&
&a class="btn btn-default" href="http://plnkr.co/edit/3FBasliZTRjKs3jwTpoR?p=preview" role="button"&plunker&/a&
var app =angular.module(&myApp&,[&ngSanitize&]);
app.controller(&ctrl&,function($scope,$sce){
$scope.myHtml = &&p style="color:blue"&an html\n& +
&&em onclick="this.textContent=\&code_bunny\&"&click here&/em&\n& +
&snippet&/p&&;
$scope.trustHtml = $sce.trustAsHtml($scope.myHtml)
点击查看效果:&
下面来具体说明一下这个栗子:
表格第一行: myHtml是一段字符串,但是它的内容是一段html,使用ng-bind-html可以把它作为元素的.html()绑定给元素.在这里我们给模块添加依赖&&ngSanitize&&,(需要链入angular-sanitize.min.js).然后使用ng-bind-html,$sanitize会自动对myHtml进行净化.
　　　　　 &所以我们看到结果,myHtml是被作为html填充到div里面的,但是不再是原来的myHtml,而是这样的:
　　　　　　
　　　　　　可以看到,$sanitize会把标签的属性都移除,以及绑定在元素上的事件.仅保留了标签和内容.
& & & & & & & &&*记住,$sanitize指令本身不会出现在js代码里.直接使用ng-bind-html就行了.但如果这里不给模块添加依赖ngSanitize,是会报错的.
表格第二行:&trustHtml 是myHtml通过$sce.trustAsHtml() 处理以后的返回值.所以它不再经过$sanitize服务的净化.直接作为元素的.html()绑定给元素,所以我们看到myHtml被完整的填充到了div里,保留了所有的属性和事件,这一行的内容不依赖于ngSanitize模块,$sce服务是内置的.
表格第三行: 不使用ng-bind-html指令.当使用ng-bind指令时,绑定的值就作为字符串填充到元素里,这个没什么好讲的.
参考原文:&&
相关阅读:&
完整代码:&
阅读(...) 评论()如何通过AngularJs从后台取数据
想实现一个通过AngularJS从后台取数据的功能，把后台取来的表中的一列显示在页面的下拉框中。js部分ajax请求不知道该怎么写，按照例子写的总是取不到值。html中是这样写的，
&select class="input_select_1" ng-model="selec" ng-options="item for item in sel"&&/select&
js中是这样写的
orderList.factory("showTransport", function(){ && &return function(params, ajax){
&& &&& &ajax.post(params, ApiUrl+"saler/queryLogistcs.do").success(function(data){
& & & & & & & & &&& $scope.sel=data.data. &&&&&&&&&&&&&&&&&&& $scope.selec = $scope.sel[0];
之前能实现的代码是：
&select class="input_select_1" ng-model="selec" ng-options="item.name for item in sel"&&/select&
&$scope.sel=[{name:"申通"},{name:"圆通"},{name:"中通"},{name:"顺丰"},{name:"EMS"},{name:"韵达"},{name:"汇通"}]; &$scope.selec = $scope.sel[0];
queryLogistcs.do返回一个字符串即可：[{name:"申通"},{name:"圆通"},{name:"中通"},{name:"顺丰"},{name:"EMS"},{name:"韵达"},{name:"汇通"}]
$scope.sel=data.data.name改为$scope.sel=data
--- 共有 5 条评论 ---
: 前面debug了一下问题解决了多谢帮助了
: 仁兄说的是，小弟确实基础不扎实
: 这只是单纯的结构问题，原本是一个array含有多个object，去掉{name:}以后就是一个array含有多个string了。你连数据结构都没搞清楚怎么行。
数据库里查询出来的应该是像[“申通”，"中通"，“韵达”]这样的，如果写死的话，我把之前的数组里的{name:}都去掉变成[“申通”，"中通"，“韵达”]这样的是可以的
因为数据库里查询出来的是一个Object数组，查询出来的话是有好多项，这样的话用$scope.sel=data可以嘛？
这种的还需要查数据库吗,直接配置个数组就行了
--- 共有 1 条评论 ---
需求是从数据库里查，写死不容易维护AngularJS 教程
AngularJS ng-bind 指令
AngularJS 实例
绑定 &p& 内的 innerHTML 到变量 myText:
&div ng-app="" ng-init="myText='Hello World!'"&&p
ng-bind="myText"&&/p&&/div&
定义和用法
ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。
如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。
&element ng-bind="expression"&&/element&
或作为 CSS 类：
&element class="ng-bind: expression"&&/element&
所有的 HTML 元素都支持该指令。
expression
指定要执行的变量或表达式。
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码