angular.js的ng-app 指令定义一个 AngularJS 应用程序。
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>局部数据</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/6.js"></script>
<style>
@charset"utf-8";
</style>
</head>
<body>
<div class="container" ng-controller="shuju">
<div class="row">
<div class="col-md-12 lin-height">ng-app 指令定义一个 AngularJS 应用程序。</div>
</div>
<div class="row">
<div class="col-md-6 bind lin-height">ng-model 指令把元素值（比如输入域的值）绑定到应用程序</div>
<div class="col-md-6 "><input type="text" class="form-control" ng-model="yonghu"></div>
</div>
<div class="row">
<div class="col-md-4 bind lin-height">用户名</div>
<div class="col-md-8 bind">
<input type="text" class="form-control" ng-model="yonghu">
</div>
</div>
<div class="row">
<div class="col-md-12 bind lin-height">一个子scope通常原型继承于它的父scope。应用于这个规则的表达式是一个使用scope:{...}的指令</div>
</div>
<div class="row">
<div class="col-md-4 bind lin-height">ng-model="chuanshu.names"</div>
<div class="col-md-8 bind">
<input type="text" class="form-control" ng-model="chuanshu.names">
</div>
</div>
<div class="row">
<div class="col-md-4 bind lin-height">ng-model="chuanshu.dan"</div>
<div class="col-md-8 bind">
<input type="text" class="form-control" ng-model="chuanshu.dan">
</div>
</div>
<div class="row">
<div class="col-md-12 bind lin-height">通过函数计算表达式计算绑定的数据之间的关系</div>
</div>
<div class="row">
<div class="col-md-4 bind lin-height">$scope.sum=function(){}</div>
<div class="col-md-8 lin-height" style="color:red;font-size:28px">
{{sum()}}
</div>
</div>
<div class="row">
<div class="col-md-12 lin-height">
循环跨域去取数据渲染页面
</div>
</div>
<div class="row">
<div class="col-md-12 lin-height">
ng-init和ng-bind配合使用，封装数据和及时解析书籍
</div>
</div>
<div class="row">
<div class="col-md-12" ng-init="danjia=10;shu=20">
<p ng-bind="danjia * shu"></p>
</div>
</div>
<div class="row">
<div class="col-md-12" ng-init="array=[1,2,3,4,5]">
<p ng-bind="array[2]"></p>
</div>
</div>
<div class="row">
<div class="col-md-12 bind lin-height">循环打印出来的数据</div>
</div>
<div class="row">
<ol ng-controller="text">
<li ng-repeat="guojia in guojias"> {{$index+1}}----
{{guojia.cname}}----
{{guojia.renkou}}
</li>
</ol>
</div>
<div class="row">
<div class="col-md-12 bind lin-height">很牛逼的数据绑定，不经过函数</div>
</div>
<div class="row" ng-init="qw=1;dw=3">
<div class="col-md-6"><input type="text" class="form-control" ng-model="qw"></div>
<div class="col-md-6"><input type="text" class="form-control" ng-model="dw"></div>
</div>
<div class="row">
<div class="col-md-6">{{ qw * dw }}</div>
</div>
<div class="row">
<div class="col-md-12 bind lin-height">$http 是一个用于读取web服务器上数据的服务。$http.get(url) 是用于读取服务器数据的函数</div>
</div>
<div class="row" ng-app="myApp">
<ol ng-controller="customersCtrl">
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ol>
</div>
<div class="row">
<div class="col-md-6">
<a href="" name="myname"></a>
</div>
<div class="col-md-6">
<a href="" name="myname"></a>
</div>
</div>
</div>
</body>
</html>
上面的css部分就没有什么东西可说了！直接js了
function shuju($scope,$timeout){
$scope.chuanshu={
names:38,
dan:0
};
$scope.sum=function(){
return $scope.chuanshu.names*$scope.chuanshu.dan;
}
};
var text = function($scope){
//alert(1);
$scope.renkou = 7000;
$scope.guojias =
[
{cname:'中国',renkou:1.1},
{cname:'日本',renkou:2.2},
{cname:'美国',renkou:3.3}
];
};
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost/de6.js").success(function (response) {$scope.names = response.records;});
});
angular.js的ng-app 指令定义一个 AngularJS 应用程序。的更多相关文章
- 定义一个共享数据块DB1 在DB1中定义一个数组 用程序 访问数据里面的某一个成员或者地址连续的成员
提纲 : 定义一个共享数据块 DB1 在DB1 中定义数组 用SFC21 实现 实现全部数组元素的赋一样的值 实现 给数组中的某一个元素赋值 实现 对数组中的全部元素赋值 实现将数组中的某个 或者 某 ...
- 【AngularJS】—— 3 我的第一个AngularJS小程序
通过前面两篇的学习,基本上对AngularJS的使用有了一定的了解. 本篇将会自己手动写一个小程序,巩固下理解. 首先要注意的是,引用AngularJS的资源文件angular.min.js文件. 由 ...
- angular学习笔记(三十)-指令(9)-一个简单的指令示例
学了前面这么多关于指令的知识,现在就用指令来写一个小组件:expander 这个组件的功能就是点击开展菜单,再点击收起菜单: ↑↓点击展开收起 下面来看它的代码: html: <!DOCTYPE ...
- angular.js封装的树形指令
html ul.tree-show sub-transclude-set ng-transclude li.parent(ng-repeat='(key,item) in treeData',ng-i ...
- 使用JavaScript定义一个微信小程序插件样例
var wxTimer = new wxTimer({ beginTime: "00:00:20", complete: function () { wx.redirectTo({ ...
- Angular.js 学习笔记
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...
- Angular JS 学习笔记（二）
1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...
- angular js 初学
1 angularJS的一些概念 AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 是一个 JavaScript 框架,它是一个以Javascript编写的库,它可通过 ...
- Angular.JS学习笔记——1
内容来自:http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 是一个 JavaScript 框架.它是一个以 JavaScri ...
随机推荐
- javaWeb项目（SSH框架+AJAX+百度地图API+Oracle数据库+MyEclipse+Tomcat）之一 基础Struts框架搭建篇
即将开始着手写这个项目,所以希望通过这篇博客来记录自己学习的过程 今天开学第一天,就上了软件工程实践课,自己也开始着手做这个大作业了.首先我的项目名称叫做智能班车管理系统. 项目的概况: 该软件产品是 ...
- Python 基础 一
Python 基础 一 一.关于Python的介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum),这一两年在国内很流行,应用很广泛. 二.Python的基础知识(1) 1 ...
- 初识Kafka----------Centos上单机部署、服务启动、JAVA客户端调用
作为Apach下一个优秀的开源消息队列框架,Kafka已经成为很多互联网厂商日志采集处理的第一选择.后面在实际应用场景中可能会应用到,因此就先了解了一下.经过两个晚上的努力,总算是能够基本使用. 操作 ...
- centos下的activemq的配置及PHP的使用
一.安装JDK 1.下载JDK(官网:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...
- 产品经理学Python：条件控制
条件控制其实就是if...else...(如果...条件是成立的,就做...:反之,就做...)的使用,其基本结构是: 具体看下面这个例子: def account_login(): # 定义函数 p ...
- sscanf( )函数初体验
解析字符串,将%格式的内容,存储到后面的参数中 %% - 返回一个百分号 % %c - ASCII 值对应的字符 %d - 包含正负号的十进制数(负数.0.正数) %e - 使用小写的科学计数法(例如 ...
- Power Pivot表属性无法切换回表预览模式的问题
近期Office365用户升级后解决了在Power Pivot中输入中文的问题,但是同时也带来了一个新的问题就是表属性窗口默认为“查询编辑器”模式,且无法切换回“表预览”模式. 本文和您分享在这种情况 ...
- 转：MySQL表名不区分大小写
在LINUX下调一个程序老说找不到表,但是我明明是建了表的,在MYSQL的命令行下也可以查到,为什么程序就找不到表呢? 一.linux中mysql大小写详情: 1.数据库名严格区分大小写 2.表名严格 ...
- jenkins 集成钉钉机器人
最早做Jenkins发布完成以后通过邮件发送信息通知相关的联系人,发现邮件会受限于大家接收的设置,导致不能及时的看到相关的发布内容,公司使用钉钉做为公司内部的通讯工具,所以想通过Jenkins发布完成 ...
- 【收藏】15个常用的javaScript正则表达式
1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP ...