<!DOCTYPE html>
<html lang="zh" ng-app="myapp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="../bower_components/angular/angular.js" type="text/javascript" charset="utf-8"></script>
<title>AngularJs-数据的双向绑定</title>
</head>
<body ng-init="username='bilaisheng';address='北京';">
<h3>for TestController</h3>
<ul ng-controller="TestController">
<li ng-repeat="room in classroom">
{{room.name}}-->{{room.age}}-->{{username}}-->{{address}}
</li>
</ul>
<h3>for TestController2</h3>
<ul ng-controller="TestController2">
<li ng-repeat="room in classroom">
{{room.name}}-->{{room.age}}-->{{username}}-->{{address}}
</li>
</ul>
<h3>for ng-bind</h3>
<div>用户名:<input type="text" ng-model="username" /></div>
<div>你输入的用户名是：{{username}}</div>
<div>你输入的用户名是：<span ng-bind="username"></span></div>
<div>你输入的用户名是：<span class="ng-bind:username"></span></div>
<script type="text/javascript">
// 初始化一个angularjs的代理对象
var app = angular.module("myapp",[]);
// for TestController
app.controller("TestController",function($scope,$rootScope,$log){
$scope.classroom=[
{name:"张三",age:20},
{name:"李四",age:21},
{name:"王五",age:22},
{name:"赵六",age:23}
];
$scope.username="李七";
});
// for TestController2
app.controller("TestController2",function($scope,$rootScope,$log){
$scope.classroom=[
{name:"张三",age:20},
{name:"李四",age:21},
{name:"王五",age:22},
{name:"赵六",age:23}
];
$scope.username="李七";
});
/**
* ng-init : 初始化数据
* ng-repeat: 迭代数组和对象,语法
* ng-repeat="变量 in 对象/数组" -- 循环
* eg : <div ng-repeat"变量 in 对象/数组"></div>
*
* AngularJs双向数据绑定: 能够大幅度减少对dom元素的操作.
*/
</script>
</body>
</html>AngularJs-03-数据的双向绑定
2018-03-18
1217
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
<!DOCTYPE html>
<html lang="zh" ng-app="myapp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.
目录
相关文章
|
6月前
|
JavaScript
AngularJS中的自定义指令：创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中，可以创建自定义指令，如示例中的`myCustomDirective`。指令的属性（如`restrict`、`template`、`replace`）和方法（如`link`、`scope`）可定制其行为。在HTML中使用`restrict`指定的方式（如元素、属性等）来插入指令。遵循命名规范，避免直接DOM操作，使用隔离作用域和关注重用性与扩展性，能有效提升代码质量。自定义指令是AngularJS强大功能之一，有助于实现复杂DOM操作和组件复用。
58
2
2
|
6月前
|
JavaScript
前端开发
开发者
深入探索AngularJS的双向数据绑定机制
【4月更文挑战第27天】本文深入探讨AngularJS的双向数据绑定机制，该机制通过脏检查和插值表达式自动处理视图与模型的同步，简化开发。优点在于简化数据同步，提供实时用户体验，但可能引发性能问题和数据污染。文章通过示例解释了如何使用`ng-model`和插值表达式实现绑定，并提醒开发者注意潜在挑战。理解这一机制有助于构建更高效的应用。
63
3
3
|
6月前
|
JavaScript
前端开发
API
|
前端开发
JavaScript
开发者
AngularJS 和 React区别
@[TOC](目录)
AngularJS 和 React 是两个目前最为流行的前端框架之一。它们有一些共同点，例如都是基于 JavaScript 的开源框架，都能够帮助开发者构建复杂的单页面应用程序等。但也存在一些不同点，如下所述：
# 1. 背景：
AngularJS 由 Google 的前雇员 Misko Hevery 开发，并于 2010 年首次发布。它是一个基于 JavaScript 的前端框架，旨在简化应用程序的开发过程。React 由 Facebook 的前雇员 Mark Zuckerberg 开发，并于 2013 年首次发布。它是一个基于 JavaScript 的库，可以用于
150
0
0
|
Web App开发
AngularJs——双向数据绑定示例
最近在做Hybird App,接触到了AngularJs,感觉用起来蛮爽的，今天share下AngularJs的核心功能之一：双向数据绑定。
我们在页面中加入一个表单：
Two...
1024
1
1
|
数据格式
JSON
JavaScript
【AngularJS】—— 5 表单
754
0
0
|
JavaScript
前端开发
【AngularJS】—— 8 自定义指令
1231
0
0
angularjs 基础
1022
0
0
|
JavaScript
前端开发
AngularJS的简单表单验证
1047
0
0
|
数据安全/隐私保护
angularjs 表单校验
1244
0
0