<!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 应用程序。的更多相关文章

  1. 定义一个共享数据块DB1 在DB1中定义一个数组 用程序 访问数据里面的某一个成员或者地址连续的成员

    提纲 : 定义一个共享数据块 DB1 在DB1 中定义数组 用SFC21 实现 实现全部数组元素的赋一样的值 实现 给数组中的某一个元素赋值 实现 对数组中的全部元素赋值 实现将数组中的某个 或者 某 ...

  2. 【AngularJS】—— 3 我的第一个AngularJS小程序

    通过前面两篇的学习,基本上对AngularJS的使用有了一定的了解. 本篇将会自己手动写一个小程序,巩固下理解. 首先要注意的是,引用AngularJS的资源文件angular.min.js文件. 由 ...

  3. angular学习笔记(三十)-指令(9)-一个简单的指令示例

    学了前面这么多关于指令的知识,现在就用指令来写一个小组件:expander 这个组件的功能就是点击开展菜单,再点击收起菜单: ↑↓点击展开收起 下面来看它的代码: html: <!DOCTYPE ...

  4. angular.js封装的树形指令

    html ul.tree-show sub-transclude-set ng-transclude li.parent(ng-repeat='(key,item) in treeData',ng-i ...

  5. 使用JavaScript定义一个微信小程序插件样例

    var wxTimer = new wxTimer({ beginTime: "00:00:20", complete: function () { wx.redirectTo({ ...

  6. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  7. Angular JS 学习笔记（二）

    1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...

  8. angular js 初学

    1 angularJS的一些概念 AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 是一个 JavaScript 框架,它是一个以Javascript编写的库,它可通过 ...

  9. Angular.JS学习笔记——1

    内容来自:http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 是一个 JavaScript 框架.它是一个以 JavaScri ...

随机推荐

  1. LinkCode 下一个排列、上一个排列

    http://www.lintcode.com/zh-cn/problem/next-permutation-ii/# 原题 给定一个若干整数的排列,给出按正数大小进行字典序从小到大排序后的下一个排列 ...

  2. Elasticserach学习笔记-01基础概念

    本文系本人根据官方文档的翻译,能力有限.水平一般,如果对想学习Elasticsearch的朋友有帮助,将是本人的莫大荣幸. 原文出处:https://www.elastic.co/guide/en/e ...

  3. AIX误删除LV后如何进行现场保护和数据恢复工作

    在AIX环境下,若因维护误操作.存储mapping错误等,不小心将LV误删除,这种损失通常是巨大的.删除后的不当保护及恢复操作可能使数据无法恢复,也可能增加处理的时间与算法复杂度.如何有效保护现场,并 ...

  4. 用 Python 编写网络爬虫 笔记

    Chapter I 简介 为什么要写爬虫? 每个网站都应该提供 API,然而这是不可能的 即使提供了 API,往往也会限速,不如自己找接口 注意已知条件(robots.txt 和 sitemap.xm ...

  5. js 数字递增特效 仿支付宝我的财富 HTML5

    上周五应着公司临时需求,一天的时间解决掉官网(ps:比较简单哈哈),需求里面有一个特效就是数字递增到指定的数值,其实JS写也不复杂的,但是我发现一个js小插件,这个插件轻巧简单,用起来也非常简单实用. ...

  6. Spring Boot 整合 MyBatis

    前言 现在业界比较流行的数据操作层框架 MyBatis,下面就讲解下 Springboot 如何整合 MyBatis,这里使用的是xml配置SQL而不是用注解.主要是 SQL 和业务代码应该隔离,方便 ...

  7. [.NET] 《Effective C#》快速笔记 - C# 中的动态编程

    <Effective C#>快速笔记 - C# 中的动态编程 静态类型和动态类型各有所长,静态类型能够让编译器帮你找出更多的错误,因为编译器能够在编译时进行大部分的检查工作.C# 是一种静 ...

  8. Python进阶之装饰器

    函数也是对象 要理解Python装饰器,首先要明白在Python中,函数也是一种对象,因此可以把定义函数时的函数名看作是函数对象的一个引用.既然是引用,因此可以将函数赋值给一个变量,也可以把函数作为一 ...

  9. 学习MVC之租房网站（七）-房源管理和配图上传

    在上一篇<学习MVC之租房网站(六)-用户登录和权限控制>完成了后台用户登录和权限控制功能的开发,接下来要完成的是房源的管理,用户在后台新增.编辑房源信息,供前台用户操作. 一 房源管理 ...

  10. Jdk1.6 JUC源码解析(1)-atomic-AtomicXXX

    转自:http://brokendreams.iteye.com/blog/2250109 功能简介: 原子量和普通变量相比,主要体现在读写的线程安全上.对原子量的是原子的(比如多线程下的共享变量i+ ...