双向数据

利用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基础（二）的更多相关文章

  1. Angular基础(二) 组件的使用

    ​ 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以 ...

  2. 第214天:Angular 基础概念

    一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...

  3. Angular基础---->AngularJS的使用(一)

    AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...

  4. Python全栈开发【基础二】

    Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...

  5. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  6. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  7. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  8. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  9. Bootstrap <基础二十五>警告（Alerts）

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  10. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

随机推荐

  1. 从SonarQube谈设计模式

    SonarQube SonarQube是用来检测代码质量的,但类似工具的推广常常遇到阻碍. 成型项目或僵尸项目可以理解,项目优化需要投入的人力成本和时间成本太大,而且最主要的是无法保证改动过程中不引入 ...

  2. OpenGL教程(2)——第一个窗口

    OpenGL环境终于配置好了,现在我们可以开始学习OpenGL了. 首先,创建一个.cpp文件,然后打上几行#include指令: #include <iostream> using st ...

  3. python3-如何正常使用HTMLTestRunner.py，生成自动化测试报告

    其实HTMLTestRunner.py是基于python2开发的,为了使其支持python3环境,需要对其的部分内容进行修改.下面我们通过编辑器打开HTMLTestRunner.py文件(编辑器可以选 ...

  4. 实现UDP高效接收/响应

    环境Linux g++6.3.0 问题一:一个ip地址如何接收高并发请求 问题二:如何高并发响应消息 发送请求端只能通过ip地址+端口号向服务器发送请求码,所以服务器只能用一个UDP去绑定此ip以及端 ...

  5. 抓包工具-Wireshark（详细介绍与TCP三次握手数据分析）

    功能使用的详细介绍 wireshark(官方下载网站: http://www.wireshark.org/),是用来获取网络数据封包,可以截取各种网络封包,显示网络封包的详细信息,包括http,TCP ...

  6. 玩转nodeJS系列：使用原生API实现简单灵活高效的路由功能(支持nodeJs单机集群),nodeJS本就应该这样轻快

    前言: 使用nodeJS原生API实现快速灵活路由,方便与其他库/框架进行整合: 1.原生API,简洁高效的轻度封装,加速路由解析,nodeJS本就应该这样轻快 2.不包含任何第三方库/框架,可以灵活 ...

  7. C# ftp 图片上传多快好省

    前言 此篇讲到的是图片上传功能,每个网站必定会有这样类似的功能,上传文件.上传图片等等.那么接下来,看看我们EF+uploadfile+ftp如何玩转上传图片吧 效果预览 具体实现 一个简单数据库 只 ...

  8. cat和tac的用法

    1.cat和tac的功能 cat从前往后显示文本文件内容tac与cat相反,从后往前显示文本文件内容 2.cat用法 $cat [-AbEnTv] [filename]选项与参数:-A :相当于 -v ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（84）-Quartz 作业调度用法详解一

    前言 我从Quartz2.0开始使用,并对其进行了封装了界面,可以参考 http://www.cnblogs.com/ymnets/p/5065154.html 最近拿出来进行了优化,并升级到最新版, ...

  10. grid编辑后时间格式不对问题

    在column中应该定义xtype和format格式: xtype: 'datecolumn', format:'Y-m-d'   之后正常