1. 程式人生 > >angular雙向資料繫結例項程式碼

angular雙向資料繫結例項程式碼

var myCart = angular.module("myCart", []);
	myCart.controller("myCartController", function($scope) {
		//,{title:'惠普節能檯燈',price:'99.00',num:10,img:'img/3.jpg'}
		$scope.bill = {
			discount: 0
		};
		$scope.cartInfo = [{
			title: '惠普機械鍵盤',
			price: 998.00,
			num: 1,
			img: 'img/1.jpg'
		}, {
			title: '惠普機械滑鼠',
			price: 668.00,
			num: 1,
			img: 'img/2.jpg'
		}, {
			title: '惠普節能檯燈',
			price: '99.00',
			num: 10,
			img: 'img/3.jpg'
		},{
			title: '惠普機械鍵盤',
			price: 998.00,
			num: 1,
			img: 'img/1.jpg'
		}, {
			title: '惠普機械滑鼠',
			price: 668.00,
			num: 1,
			img: 'img/2.jpg'
		}, {
			title: '惠普節能檯燈',
			price: '99.00',
			num: 10,
			img: 'img/3.jpg'
		}]; /*數量相加函式*/
		$scope.jia = function(obj) {
				obj.num = obj.num + 1;
			}
			/*相減函式*/
		$scope.jian = function(obj) {
				if (obj.num > 1) {
					obj.num = obj.num - 1;
				}
			}
			/*移除函式*/
		$scope.remove = function(obj) {
				for (var i = 0; i < $scope.cartInfo.length; i++) {
					if (obj.title === $scope.cartInfo[i].title) {
						$scope.cartInfo.splice(i, 1);
					}
				}
			}
			/*計算總金額*/
		$scope.total = function() {
				var total = 0;
				for (var i = 0; i < $scope.cartInfo.length; i++) {
					total += $scope.cartInfo[i].price * $scope.cartInfo[i].num;
				}
				return total;
			}
			/*實付金額*/
		$scope.subTotal = function() {
			return $scope.total() - $scope.bill.discount;
		}

		function equalTotal(newValue, oldValue, scope) {
			//alert(newValue+"---oldValue--"+oldValue);
			return $scope.bill.discount = newValue > 1000 ? 10 : 0;
		}
		$scope.$watch($scope.total, equalTotal);
	})

執行效果如下》》》》》》

相關推薦

angular雙向資料例項程式碼

var myCart = angular.module("myCart", []); myCart.controller("myCartController", function($scope) { //,{title:'惠普節能檯燈',price:'99.00',num:10,img:'img/3.j

vue.js和angular雙向資料的實現原理

一、vue雙向資料繫結 1、原理 資料劫持: vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter,在資料變動時釋出訊息給訂閱者,觸發相應的監聽回撥。 2、實現步驟 要實現mv

Angular雙向資料原理

Angular是通過髒檢測來進行雙向資料繫結 Angular比不是通過定時去進行檢測 Angular在$digest cycle流程裡面,會從rootscope開始遍歷,檢查所有的watcher。

Angular雙向資料

髒檢查機制:Angular將雙向繫結轉換為一堆watch表示式,然後遞迴這些表示式檢查是否發生過變化,如果變了則執行相應的watcher函式(指view上的指令,如ng-bind,ng-show等或是{{}})。等到model中的值不再發生變化,也就不會再有watcher被

Angular 雙向資料失效

當你的angular頁面中引入了jq外掛的時候,就可能會出現雙向繫結失效的現象。 表現為你的變數打印出來是已經更改過的數值,但是頁面中的數值不改變。應該是 沒有觸發髒值檢查,所以檢視層不會更新。解決辦

angular,vue,react的基本語法—雙向資料、條件渲染、列表渲染、angular小案例

基本語法: 1、雙向資料繫結 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"雙向資料繫結" } render(){ <input type="text" value={this.state

Vue2.0例項雙向資料

結果展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt

Angular.js基本概念和用法--(一雙向資料

這個雙向資料繫結指的是從資料模型到檢視,從檢視到資料模型之間的雙向繫結。前面介紹過AngularJS是一個MVC框架,我們在操作的時候主要是通過控制器進行操作的,讓控制器去修改資料模型,然後資料模型的變更會反映到檢視上。內容簡介1.最簡單的例子2.取值表示式與ng-bind指

JavaScript實現簡單的雙向資料(Ember、Angular、Vue)

什麼是雙向資料繫結呢? 簡單的說 就是UI檢視與資料繫結在了一塊 也就是資料和檢視是同步改變的 雙向資料繫結最常見的應用場景就是表單 (應用場景還是很有限的) 現在我們要實現這樣一個簡單的資料繫結 輸入欄中輸入字元 和它繫結的節點內容

從一段.html程式碼說起談談AngularJs中的雙向資料

<!DOCTYPE html> <html lang="en" ng-app> <--省略head部分程式碼—> <body> input1: <input type="text" ng-model='message'

面試題:你能寫一個Vue的雙向資料嗎?

在目前的前端面試中,vue的雙向資料繫結已經成為了一個非常容易考到的點,即使不能當場寫出來,至少也要能說出原理。本篇文章中我將會仿照vue寫一個雙向資料繫結的例項,名字就叫myVue吧。結合註釋,希望能讓大家有所收穫。 1、原理 Vue的雙向資料繫結的原理相信大家也都十分了解了,主要是通過 Obje

雙向資料實現之Object.defineProperty

vue.js利用的是es5的 defineproperty 特性實現的雙向資料繫結,瞭解一下基本原理。 舉例 var person= {}; Object.defineProperty(person, "name", { v

WPF雙向資料總結

1、指定繫結源 WPF雙向資料同步:目標屬性(UI)和源屬性(CS)資料同步。 實現雙向資料同步資料來源需要實現依賴屬性INotifyPropertyChanged介面,因為依賴屬性有垂直的內嵌變更通知機制。 INotifyPropertyChanged是用於實現介面通知。DependencyObjec

轉 vue實現雙向資料之原理及實現篇 vue的雙向原理及實現

轉自:canfoo#! vue的雙向繫結原理及實現 前言 先上個成果圖來吸引各位: 程式碼:                          &nb

Vue 框架-03-鍵盤事件、健值修飾符、雙向資料

Vue 框架-03-鍵盤時間及健值修飾符 一、鍵盤事件,當按鍵盤時,在控制檯輸出提示 html 原始碼: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

005 雙向資料

一 .概述   在Vue之中最吸引人的就是雙向資料繫結的內容了.   在Vue之中使用v-model完成雙向資料繫結,   對於雙向資料繫結就是依賴表單元素的,在這裡我們說下常見的雙向資料繫結的內容.   二 .雙向繫結演示  <div id="app">

Vue學習(3)————————ClassStyle,雙向資料,dom節點

標籤內繫結屬性(此功能看來可以動態繫結標籤屬性) <template> <div id="app"> <div v-bind:title="title"> 滑鼠走一走 </div> </div> </temp

Vue學習(三)——屬性雙向資料

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>屬性繫結和雙向資料繫結</title> <script src="./v

簡單實現VUE的雙向資料

<!DOCTYPE html> <html> <head> <title>vue-雙向資料繫結的簡單實現</title> </head> <body> <input type="text" name="" id

vue.js v-model雙向資料, vue.js form表單資料

vue.js v-model雙向資料繫結, vue.js form表單資料繫結   ================================ ©Copyright 蕃薯耀 2018年11月29日 http://fanshuyao.iteye.com/   &l