angular入门--绑定字符串
要使用angularjs,首先得下载并且在页面中调用它
先上源码
<html ng-app="app1">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>angularJs Test</title>
<script src="angular.min.js"></script>
</head>
<body ng-controller='ctrl1' >
<span ng-bind='name'>aaaaaaaaaaaa</span>
<script>
var app=angular.module('app1',[]);
app.controller('ctrl1',['$scope',function($scope){
$scope.name="China";
}])
</script>
</body>
</html>
几个说明
1.ng-app代表这是一个angularJs app
2.ng-controller代表这是一个控制器,简单来讲它定义了作用域;
3.如何绑定字符串
<span ng-bind='name'>aaaaaaaaaaaa</span>
<span ng-bind-template='this is :{{name}}'>aaaaaaaaaaaa</span>
第一种方式直接绑定了scope的一个变量
第二种方式可以在绑定scope name的情况下,可以在前面加上this is:
但是无论哪种方式,都会冲掉span里面有的aaaaaaaaaaaaa内容
效果如下
第一种解析结果
第二种解析结果
其实还有第三种方式,不过这种方式当angular没有加载完时,会直接显示在页面上,简单讲页面会显示没有解析的结果,代码和效果也上吧
<span >aaaaaaaa:{{name}}</span>
angular入门--绑定字符串的更多相关文章
- angular入门
angular入门 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...
- Angular入门笔记
AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发 ...
- OO的奇妙冒险——OOP入门与字符串处理
OO的奇妙冒险 ~OOP入门与字符串处理~ 总体分析 公测 中测(基础与进阶): 其实在我看来,从完成作业的角度来说,中测的基础与进阶并没有任何区别,都不能挂,都不太难,都对得分没有什么影响.中测的样 ...
- angular入门一之环境安装及项目创建
angular入门一之环境安装及项目创建 1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https:// ...
- python3入门之字符串
获得更多资料欢迎进入我的网站或者 csdn或者博客园 经过前面的介绍相信大家也对python有了一个初步的了解:本节主要介绍字符串,不管学习什么编语言字符串一定在其中扮演着重要的地位.本节主要讲解,字 ...
- Vue && Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除 还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
- Angular入门篇高速开发导航网
简单介绍 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式.这样的方式能够让你扩展HTML的语法.以弥补在构建动态WEB应用时静态文本的不足.从而在web应用程 ...
- Nodejs之MEAN栈开发(五)---- Angular入门与页面改造
这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似 ...
- Angular 入门学习
1.Hello World 入门 源代码 <!doctype html> <html ng-app> <head> <script src="htt ...
随机推荐
- TZOJ 复习时间
描述 为了能过个好年,xhd开始复习了,于是每天晚上背着书往教室跑.为了追求更高的效率,xhd要根据难度值来选择合适的课程进行复习,复习后一门课的效率为前一门课之间的难度差的平方,而复习第一门课的效率 ...
- 练习C++的vector语法-约瑟夫问题
//测试vector,约瑟夫问题 #include <iostream> #include <vector> using namespace std; int main() { ...
- Firewalld 的基本使用
RHEL 7 系统中集成了多款防火墙管理工具,其中 firewalld(Dynamic Firewall Manager of Linux systems,Linux 系统的动态防火墙管理器)服务是默 ...
- zabbix 监控cpu 温度
Zabbix监控Linux主机CPU温度 一.客户端 1.客户Linux主机安装Im_sensors [root@localhost ~]# yum install -y lm-sensors-y ...
- 撒花,推荐一下我怒肝的 GitHub
缘起 之前一直有很多小伙伴们找我,让我聊一聊如何学习 Java ,我都直接回复了一个思维导图,后来想一想觉得回答不是很认真,我的初衷是想让小伙伴们根据思维导图中的知识点,采取各个击破 的原则,哪里不会 ...
- Linux系统命令详解
目录 1. su 1.1. su命令中passwd的自动输入 2. sshpass 3. locate/mlocate 4. top/htop 5. lftp 6. kill/killall 1. s ...
- C#数据结构与算法系列(三):队列
1.介绍 队列是一个有序列表,可以用数组或是链表来实现. 遵循先入先出的原则,即:先存入队列的数据,要先取出.后存入的要后取出 队列是属于线性结构中的一种 2.图示 3.通过数组实现 public ...
- Android学习笔记使用AlertDialog实现对话框
使用AlertDialog可以实现如下对话框 案例 布局问文件就加了几个Button,我直接上Java代码了 实现显示带取消,确定按钮的对话框按钮 Button showDialogOne = fin ...
- 多线程高并发编程(11) -- 非阻塞队列ConcurrentLinkedQueue源码分析
一.背景 要实现对队列的安全访问,有两种方式:阻塞算法和非阻塞算法.阻塞算法的实现是使用一把锁(出队和入队同一把锁ArrayBlockingQueue)和两把锁(出队和入队各一把锁LinkedBloc ...
- cb21a_c++_string对象的比较
*cb21a_c++_string对象的比较s.compare(s2)--区分大小的s.compare(pos1,n1,s2)s.compare(pos1,n1,s2,pos2,n2)s.compar ...