Angular基础（二）
双向数据
利用angular把input框里面的值和h3的值绑定在一起。在input里输入内容，内容会在h3标签里显示出来。
具体效果请看下面代码：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| </head> | |
| <body ng-app="app"> | |
| <!--ng-controller控制器控制的就是angular应用程序的数据 常规的js对象 | |
| move函数是一个js函数 | |
| --> | |
| <div ng-controller="move"> | |
| <input type="text" ng-model="name"/> | |
| <h3>{{name}}</h3> | |
| </div> | |
| </body> | |
| <script type="text/javascript" src="js/angular.min.js" ></script> | |
| <script type="text/javascript"> | |
| var app = angular.module("app",[]); | |
| // 使用$scope来调用控制器 | |
| // $scope相当于作用域 控制范围 | |
| app.controller("move",function($scope){ | |
| $scope.name = "abcd" | |
| }) | |
| // mvc m:model 模型 即当前视图中可用的数据 | |
| // v:view 视图 即html | |
| // c:controller 控制 即js函数，可以添加和修改的属性 | |
| </script> | |
| </html> |
Angular基础（二）的更多相关文章
- Angular基础(二) 组件的使用
一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以 ...
- 第214天:Angular 基础概念
一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...
- Angular基础---->AngularJS的使用(一)
AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...
- Python全栈开发【基础二】
Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...
- Bootstrap <基础二十九>面板（Panels）
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap <基础二十五>警告（Alerts）
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- Bootstrap<基础二十四> 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
随机推荐
- 备忘录《一》基于cookie使用拦截器实现客户每次访问自登陆一次
原创声明:本文为本人原创作品,绝非他处摘取,转载请联系博主 相信大家在各大网站都会遇到,登录时,在登录框出现下次免登陆/一个月免登陆的类似选项,本次博文就是讲解如何实现,在这记录一下,也算是做个备忘录 ...
- React介绍（讲人话）
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px "PingFang SC"; color: #616161 } span. ...
- MPP 一、Greenplum 集群安装
Installating and Initializing a Greenplum Database System... 1 安装说明 1.1 环境说明 名称 版本 下载地址 虚拟机 Oracle V ...
- Java 开发中如何正确踩坑
为什么说一个好的员工能顶 100 个普通员工 我们的做法是,要用最好的人.我一直都认为研发本身是很有创造性的,如果人不放松,或不够聪明,都很难做得好.你要找到最好的人,一个好的工程师不是顶10个,是顶 ...
- javacv开发详解之1：调用本机摄像头视频（建议使用javaCV1.3版本）
javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...
- 带着问题写React Native原生控件--Android视频直播控件
最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法: 现在条件:视频播放控件(开源的ijk ...
- php练习 租房子
题目要求 1.封装类 <?php class DBDA { public $fuwuqi="localhost"; //服务器地址 public $yonghuming=&q ...
- Unity3D常用 API 之 Invoke 函数调用
1.金钱副本细节完善 1.1.宝箱自动掉落 给宝箱预制体添加刚体组件即可. 1.2.实现按键宝箱批量掉落 ①将实例化生成宝箱的代码单独封装成一个函数: ②使用 for 循环,批量生成宝箱. 按一次z键 ...
- sed的用法
1.什么是sed sed命令是一个流线式.非交互式编辑器,可以实现在vi等编辑器中一样的编辑效果. 2.sed的工作原理 模式空间(pattern space) sed一次处理一行文本(或输入), ...
- 流畅的python学习笔记：第三章
字典的变种: OrderedDict 首先来看下面的代码,在一个字典中,有name,age,city,在遍历这个字典的时候.顺序却是随机的,不是按照我们添加的顺序也就是name->age-> ...