AngularJs学习笔记(一)----------关于数据绑定

<!DOCTYPE html5>
<html>
    <head>
        <title>AngularJs的练习</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="css/3.css"/>
    </head>
    <body ng-app="myModule1">
        <h1>AngularJs中关于数据绑定</h1>
        <h3>初识双向数据绑定</h3>
            <label for="uname">单价:</label><input type="text" id="uname" ng-model="price"/>
            <label for="num">数量:</label><input type="text" id="num" ng-model="count"/>
            <span>小计:{{ price*count }}</span>
        <hr/>
        <h3>$watch的练习</h3>
        <div ng-controller="myCtrl1">
            <label for="uname">单价:</label><input type="text" id="uname" ng-model="price"/>
            <label for="num">数量:</label><input type="text" id="num" ng-model="count"/>
            <span>小计:{{ sum }}</span><!--此处的sum是mode->view的单向绑定,故需要$watch监听完成所需功能-->
        </div>

        <script src="js/angular.js"></script>
        <script src="js/3.js"></script>
    </body>
</html>

对应的Js:

angular.module(‘myModule1‘,[])
       .controller(‘myCtrl1‘,function($scope){
               $scope.price=0;
               $scope.count=0;
               $scope.sum=$scope.price*$scope.count;

               // $watch函数返回一个注销监听的函数
               $scope.$watch(‘price‘,function(newVal,oldVal){
                   $scope.sum=newVal*$scope.count;//当价格发生变化时,更新sum
               });
               $scope.$watch(‘count‘,function(newVal,oldVal){
                   $scope.sum=newVal*$scope.price;
               });
       });
时间: 2024-11-04 18:22:00

AngularJs学习笔记(一)----------关于数据绑定的相关文章

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser

-_-#AngularJS学习笔记

AngularJS学习笔记 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .done{display:none} .ignore{color:#999} </style> <ul> <li class="

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

AngularJs学习笔记--Guide教程系列文章索引

在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看不懂,希望大家在参观的过程中指出其中的错误).经过1个多月断断续续的努力,终于把Guide里面的文章基本上都弄出来.Guide中的部分章节,由于重复的部分似乎有点多,而且篇幅较短,这里就没有列出来. 文章列表如下: AngularJs学习笔记--bootstrap AngularJs学习笔记--ht

AngularJS学习笔记filter

filter是对数据进行过滤操作,比如按某个字段搜索.格式化数据等等,是一个非常有用的接口.下面就简单介绍下它的用法. AngularJS自带的filter接口,|是filter的分隔符,参数用:分隔: currency,格式化number,货币化,默认是转化成美元  param(number,symbol),返回值将会把数字每3位加一个逗号 <input type="number" ng-model="amount"/> <p>默认美元:{

AngularJS 学习笔记 -- 指令(Directive)

AngularJS 指令学习笔记 AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的,所以要想深入理解如何定义一个指令,首相需要理解指令定义时各个参数的含义. 完整的AngularJS指令参数 angular.module('app', []) .directive('demoDirective', function (){ // 依据官方规范,指令的定义时应该严格遵循驼峰式命名规则,使用时采用'-'连接单词 return { restrict : String in ['E'

AngularJs学习笔记-慕课网AngularJS实战

第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3.指令系统 (AngularJs特有的) 4.双向数据绑定(AngularJs特有的) 第2章 基本概念和用法 第3章 核心原理解析 第4章 用AngularJS开发移动APP 第5章 前端自动化测试 TDD(测试驱动开发) 课程地址:http://www.imooc.com/view/156