AngularJS（2）——AngularJS資料雙向繫結
雙向繫結
AngularJS在$scope變數中使用髒值檢測來實現了資料雙向繫結。 Scope作用： 1.通過資料共享連線Controller和View 2.事件的監聽和響應 3.髒值檢測和資料繫結 雙向資料繫結最經常的應用場景就是表單了，這樣當用戶在前端頁面完成輸入後，不用任何操作，我們就已經拿到了使用者的資料存放到資料模型中了。因為輸入框中的ng-model和控制器中的數值實現了雙向繫結，所以更改輸入框的值或者更改控制器中的值，都會相應的更改雙方的值。$scope物件，我們可以理解為NG框架中的一個作用域物件， 在該作用域內可以做到資料和檢視的相互繫結，同時又能與其他$scope物件的作用域隔離開來。
髒值檢測
$watch：AngularJS會首先將你在{{ }}中宣告的表示式編譯成函式並呼叫$watch方法。$watch方法為當前scope註冊了一個watcher，這個watcher會被儲存到一個scope內部維護的陣列中。 $digest : 1.檢測（註冊的watch函式） 2.通知（就會觸發對應的listener函式） $apply：這個方法能夠觸發$digest方法。$digest方法的執行就標誌著一輪Digest Cycle的開始。一個購物車的例子
<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html> <html ng-app="mymodule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="panel panel-default panel-primary"> <div class="panel-heading">我的購物車</div> <div class="panel-body"> <!--ng-repeat ng-click --> <!--scope註冊了一個watcher--> <!-- 1.AngularJS會首先將你在{{ }}中宣告的表示式編譯成函式並呼叫$watch方法 --> <!-- 2.$watch方法的第一個引數是一個函式，它通常被稱為watch函式，它的返回值宣告需要監聽的變數；第二個引數是listener，在變數發生改變的時候會被呼叫。--> <table ng-controller="CartController" class="table table-bordered"> <tr> <th>序號</th> <th>商品</th> <th>單價</th> <th>數量</th> <th>金額</th> <th>操作</th> </tr> <tr ng-repeat="item in items"> <td>{{$index + 1}}</td> <td>{{item.name}}</td> <td>{{item.price | currency}}</td> <!--filter應用--> <td><input ng-model="item.quantity"></td> <td>{{item.quantity * item.price | currency}}</td> <td> <button ng-click="remove($index)">Remove</button> </td> </tr> </table> </div> </div> </body> <script src="js/angular-1.3.0.js"></script> <script src="ng-repeat.js"></script> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </html></span>
<span style="font-family:Microsoft YaHei;font-size:18px;">jS中程式碼：</span><span style="font-family:Microsoft YaHei;font-size:18px;">var mymodule=angular.module('mymodule', []);
mymodule.controller('CartController', ['$scope',
function CartController($scope) {
$scope.items = [
{name: "Angular應用", quantity: 1, price: 199.00},
{name: "Angular入門", quantity: 1, price: 139.00},
{name: "AngularJS權威教程", quantity: 2, price: 84.20}
];
//直接繫結事件remove
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
}
])
</span>
總結
想象這樣的好處，不用頁面重新整理，資料立刻返回給頁面。一直在迴圈檢測是否自己被“汙染”了，如果有變化，就通知另一邊跟著變化。這樣的震盪檢測有沒有問題呢，雙向繫結使用在一個頁面上太多，應該也會效率降低吧？請大神們前來交流。相關推薦
AngularJS（2）——AngularJS資料雙向繫結
雙向繫結 AngularJS在$scope變數中使用髒值檢測來實現了資料雙向繫結。 Scope作用： 1.通過資料共享連線Controller和View 2.事件的監聽和響應 3.髒值檢測和資料
在Bootstrap開發框架中使用dataTable直接錄入表格行資料（2）--- 控制元件資料來源繫結 在Bootstrap開發框架中使用dataTable直接錄入表格行資料
在前面隨筆《在Bootstrap開發框架中使用dataTable直接錄入表格行資料》中介紹了在Web頁面中使用Jquery DataTable外掛進行對資料直接錄入操作，這種處理能夠給使用者提供較好的資料錄入體驗，本篇繼續上篇的內容，繼續介紹這個直接錄入的處理操作，主要涉及到控制元件的初始化和資料來源的繫結等
在Bootstrap開發框架中使用dataTable直接錄入表格行資料（2）--- 控制元件資料來源繫結
在前面隨筆《在Bootstrap開發框架中使用dataTable直接錄入表格行資料》中介紹了在Web頁面中使用Jquery DataTable外掛進行對資料直接錄入操作，這種處理能夠給使用者提供較好的資料錄入體驗，本篇繼續上篇的內容，繼續介紹這個直接錄入的處理操作，主要涉及到控制元件的初始化和資料來源的繫結等
AngularJs（2）
angularjs <table ><!doctype html><!-- 要在這裏引用模塊名 --><html lang="en" ng-app=‘myApp‘><head> <meta charset="UTF-8"> <ti
vue響應式原理（資料雙向繫結的原理）
先來了解一下幾個相關概念 1、漸進式框架 下面是摘自知乎的一個解答（個人認為講述比較好的回答）： 在我看來，漸進式代表的含義是：主張最少。 每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的
使用angularjs1.x構建前臺開發框架（十一）——資料雙向繫結
angularjs中有兩個非常重要的概念，一個就是本章要介紹的資料雙向繫結，另一個則是從後端延伸過來的依賴注入。那麼何為資料雙向繫結呢？顧名思義，即元資料（model）和檢視（view）展示的資料存在繫結關係，當元資料中的資訊發生變化時，檢視中的資料會實時變化，反之亦然。
AngularJS的資料雙向繫結是怎麼實現的？
單向繫結（ng-bind） 和 雙向繫結（ng-model） 的區別: ng-bind 單向資料繫結（$scope -> view），用於資料顯示，簡寫形式是 {{}} 。<span ng-bind="val"></span> 兩者的區別在於頁面沒有載入完畢 {{val}}
Android開發（2）：資料儲存之一：SharedPrefrences和檔案讀寫
一、資料儲存 本文主要講前兩種儲存方式，其中檔案讀寫只記錄Internal Storage方式 1. SharedPrefrences方式 輕量級NVP方式儲存，以XML的檔案方式儲存，適合少量資料的儲存。 NVP：Name/Value pair, 名稱/值 對。 2.
fastai案例學習（2）——cifar資料集分類
本文主要介紹fastai的自帶案例，使用fastai實現cifar資料集分類。 1、匯入模組。 from fastai import * from fastai.vision import * from fastai.vision.models.wrn import wrn_22 to
html中table的使用（2）一般資料表
<!DOCTYPE html> <html> <head> <title>資料表</title> <style type="text/css"> *{margin:0;padding:0;} table
文字內容分析和智慧反饋（2）－ 資料預處理和按緯度統計
書接上文，考慮4個核心功能的實現，先考慮：資料預處理和按緯度統計。 1、資料預處理 1.1、基本原則 首先，考慮資料的格式。 業務資料是儲存在關係型資料庫中的。資料分析的部分，我們將使用Weka，雖然Weka習慣ARFF格式，為了實現資料分析和提取的
vue 2.0 資料雙向繫結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/vue.js"></script
深度學習之正則化系列（2）：資料集增強（資料增廣）
讓機器學習模型泛化得更好的最好辦法是使用更多的資料進行訓練。當然，在實踐中，我們擁有的資料量是很有限的。解決這個問題的一種方法是建立假資料並新增到訓練集中。對於一些機器學習任務，建立新的假資料相當簡單。對分類來說這種方法是最簡單的。分類器需要一個複雜的高維輸入
Python入門筆記（2）_ 資料型別及取整運算 round，floor，ceil
資料型別 1. 資料型別包括整數、浮點、字串，這些大家都很清楚，關於定義這裡不多說。 不過，關於整數浮點計算要多說兩句。先看如下計算 11 / 4 # ==> 2 11.0 / 4
Vue高仿餓了麼專案（2）—mock資料
mock資料即模擬後臺收據，此專案提供了一個data.json的檔案，包括用於展示所需要的資料資訊，模擬了一個數據源，對於真實的實際生產情況就是一個數據庫，此節要解決編寫一些介面，實現與這些資料的互動。 資料的獲取 在build資料夾中開啟dev-s
【冷知識】安卓微信取證（2）-加密資料解析
ID：Pansafe1EnMicroMsg.dbEnMicroMsg.db是一個加密的SQLit
武sir第二講（2）基本資料型別
一、 數字 int（整形） 在32位機器上，整數的位數為32位，取值範圍為-2**31~2**1-1，即-2147483648～2147483647在64位系統上，整數的位數為64位，取值範圍為-2**63～2**63-1，即-92233720368547758
Matlab矩陣處理小結（2）-讀資料求均值和中位數 繪製errorbar圖
files = dir('*.log'); for i=1:length(files) File =files(i).name; a=importdata(File); b=reshape(a,6,12)';%calculate tramsport
Redis（2）- 基本資料結構和操作
Redis的一個特點就是處理基本字串，還支援多種資料結構，包括Hash，List，Set，SortedSet。本章主要介紹Redis的資料結構和基本操作，並給出一些典型的使用場景。 1. 字串String 字串操作是Redis最基礎的操作。是二
小程式實戰教程（5）—檢視層WXML繫結資料、模板、邏輯
原始碼下載（XiaoDemo-V1.0)連結：http://pan.baidu.com/s/1i5sLYw1 密碼：pzqr 前篇文章介紹了小程式的MVC結構： page.js 即控制層（C），也叫