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 ...
随机推荐
- Spring+SpringMVC+Mybaties整合之配置文件如何配置及内容解释--可直接拷贝使用--不定时更改之2017/4/27
以下配置可直接使用,只需更改包名. 关于内部标签的解释及用法,都以注解形式在代码内部说明.个人原创,转载需注明出处. 1,web.xml.添加jar包后首先需要配置WEB-INF下的web.xml文件 ...
- test back
python Mysql 下载地址 http://sourceforge.net/projects/mysql-python/
- 推荐免费的svn空间
可能大部分人跟我一样办公和其他环境的代码同步选择用github,但github免费用户的代码是公开的.如果想做商业项目,用免费的github账号就不合适了,这里推荐的免费svn是个不错的选择. 1.h ...
- Servlet追忆篇:那些年一起学习的Servlet
title: servlet notebook: javaWEB tags:servlet --- Servlet是什么? Servlet是JavaWeb的三大组件之一. 作用类似银行前台接待: 接收 ...
- hdu1540线段树
https://vjudge.net/contest/66989#problem/I #include<iostream> #include<cstdio> #include& ...
- ajax获取数据后怎么去渲染到页面?
$.ajax({ url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:fo ...
- 'k1': 大于66的所有值, 'k2': 小于66的所有值
#!/usr/bin/env python # -*- coding: utf-8 -*- #有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值 ...
- java虚拟机总结
jvm内存模型 u 程序计数器 u Java栈(虚拟机栈) u 本地方法栈 u Java堆 u 方法区及其运行时常量池 垃圾回收机制 u 新生代和老年代 u 参数设置 u 垃圾回收(M ...
- LeetCode4. Median of Two Sorted Arrays---vector实现O(log(m+n)--- findkth
这道题目和PAT上的1029是同一题.但是PAT1029用O(m+n)的时间复杂度(题解)就可以,这道题要求是O(log(m+n)). 这道题花费了我一个工作日的时间来思考.因为是log因而一直思考如 ...
- VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启)
VopSdk一个高逼格微信公众号开发SDK(源码下载) VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启) 针对第一版,我们搞了第二版本,老规矩先定个目标. 一 我们的目标 a.移 ...