文档章节

AngularJS Controller 使用

兔之
 兔之
发布于 2015/11/25 22:17
字数 270
阅读 56
收藏 1

AngularJS 可用来构建单一页面应用程序(SPAs:Single Page Applications),现在在微信里的页面基本是 SPAs。

数据绑定

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>

<div ng-app="" >

fisrtname: <input type="text" ng-model="firstname"><br>
lastname: <input type="text" ng-model="lastname"><br>
name: {{ firstname + " " + lastname}}
</div>

</body>
</html>

代码中 ng-model 指令把元素值(比如输入域的值)绑定到变量 firstname 上,相当于定义一个变量。

使用 {{}}firstname 解引用得出值。

1

解引用也可以写成

name: <span ng-bind="firstname + lastname" ></span>

如果把 ng-app="" 改为 ng-app="myApp",会出现

2

Controller

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

fisrtname: <input type="text" ng-model="firstname"><br>
lastname: <input type="text" ng-model="lastname"><br>
name: {{ firstname + " " + lastname}}
</div>

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

ng-app 中指定应用程序名字后需要定义 controller 来控制行为。

控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

参考

http://www.runoob.com/angularjs/angularjs-controllers.html

© 著作权归作者所有

共有 人打赏支持
兔之
粉丝 66
博文 247
码字总数 95896
作品 7
深圳
程序员
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
0
0
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
04/04
0
0
整合jQuery Mobile+AngularJs 经验谈

两者都是不错的JS编程框架,但是各自用途不同 1. jQuery Mobile提供了不错的图形空间,以及依赖于jQuery本身,提供了不少空间操作的API 2. Angular没有啥控件,但是是一个很好的JS的MVC框架,...

工程师楚门
2014/03/12
0
19
Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同...

顽Shi
2014/09/21
0
2

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 7.* 配置网络

配置静态IP 进入配置文件目录 cd /etc/sysconfig/network-scripts 查找以 ifcfg-eno 开头的文件并编辑它 vi ifcfg-ens32 修改文件中的变量值 BOOTPROTO=staticONBOOT=yesIPADDR=192.168...

阿白
32分钟前
0
0
深入理解OAuth2.0协议

1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间。是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题。豪车一般配备两种钥匙:主钥匙和泊...

xtof
36分钟前
1
0
Linux学习-0920

3.4 usermod命令 3.5 用户密码管理 3.6 mkpasswd命令 一、usermode命令 usermode作用是用来修改用户信息。 方法: usermod 参数 username 示例1:修改用户uid usermod -u 1010 test5 示例2...

wxy丶
46分钟前
1
0
synchronized锁对象的坑

今天本来写点其他东西,碰巧写了一下synchronized,没想到掉坑里面了,大佬别笑。 起初代码大概是这样的: package com.ripplechan.part_1_2_3;import java.util.concurrent.CountDownL...

RippleChan
49分钟前
1
0
XAMPP环境搭建(Apache + MariaDB + PHP + Perl)

operation system:ubuntu-18.04.1 step1:download XAMPP #sudo wget https://www.apachefriends.org/xampp-files/7.2.9/xampp-linux-x64-7.2.9-0-installer.run step2:install XAMPP #sudo ......

硅谷课堂
51分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部