脚本宝典收集整理的这篇文章主要介绍了js實例教程-AngularJS數據綁定代碼教程,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。
1、數據->模板
數據到表現的綁定,主要是使用模板標記直接完成的:
<p>{{ w }} x{{ h }}</p>
使用 {{ }}這個標記,就可以直接引用,並綁定一個作用域內的變量。在實現上, ng 自動創建了一個 watcher。效果就是,不管因為什麼,如果作用域的變量發生了改變,我們隨時可以讓相應的頁面表現也隨之改變。我們可以看一個更純粹的例子:
<p id="test" ng-controller="TestCtrl">{{ a }}</p>
<script tyPE="text/javascript">
Angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.a = '123';
});
angular.bootstrap(document.documentElement,['app']);
</script>
上面的例子在頁面載入之後,我們可以在頁面上看到 123。這時,我們可以打開一個終端控制器,輸入:
$('#test').scope().a= '12345';
$('#test').scope().$digest();
上面的代碼執行之後,就可以看到頁面變化了。
對於使用 ng進行的事件綁定,在處理函數中就不需要去關心 $digest() 的調用了。因為 ng 會自己處理。源碼中,對於 ng 的事件綁定,真正的處理函數不是指定名字的函數,而是經過 $apply() 包裝過的一個函數。這個 $apply()做的一件事,就是調用根作用域 $rootScope 的 $digest() ,這樣整個世界就清凈了:
<p id="test" ng-controller="TestCtrl"ng-click="click()">{{ a }}</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.a = '123';
$scope.click = function(){
$scope.a = '456';
}
});
angular.bootstrap(document.documentElement,['app']);
</script>
那個 click 函數的定義,綁定時變成了類似於:
function(){
$scope.$apply(
function(){
$scope.click();
}
)
}
這裡的 $scope.$apply()中做的一件事:
$rootScope.$digest();
2. 模板->數據
模板到數據的綁定,主要是通過 ng-model 來完成的:
<input type="text" id="test" ng-controller="TestCtrl"ng-model="a"/>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.a = '123';
});
angular.bootstrap(document.documentElement,['app']);
</script>
這時修改 input 中的值,然後再在控制終端中使用:
$('#test').scope().a
查看,發現變量 a 的值已經更改了。
實際上, ng-model是把兩個方向的綁定都做了。它不光顯示出變量的值,也把顯示上的數值變化反映給了變量。這個在實現上就簡單多了,只是綁定 change事件,然後做一些賦值操作即可。不過 ng 里,還要區分對待不同的控件。
3. 數據->模板->數據->模板
現在要考慮的是一種在現實中很普遍的一個需求。比如就是我們可以輸入數值,來控制一個矩形的長度。在這裡,數據與表現的關係是:
長度數值保存在變量中
變量顯示於某個 input 中
變量的值即是矩形的長度
input 中的值變化時,變量也要變化
input 中的值變化時,矩形的長度也要變化
當然,要實現目的在這裡可能就不止一種方案了。按照以前的做法,很自然地會想法,綁定input 的 change事件,然後去做一些事就好了。但是,我們前面提到過 ng-model 這個東西,利用它就可以在不手工處理 change 的條件下完成數據的展現需求,在此基礎之上,我們還需要做的一點,就是把變化后的數據應用到矩形的長度之上。
最開始,我們面對的應該是這樣一個東西:
<p ng-controller="TestCtrl">
<p style="width: 100px; height: 10px; background-color:red"></p>
<input type="text" name="width" ng-model="width" />
</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.width = 100;
});
angular.bootstrap(document.documentElement,['app']);
</script>
我們從響應數據變化,但又不使用 change事件的角度來看,可以這樣處理寬度變化:
angular.module('app',[], angular.noop)
.controller('TestCtrl',function($scope){
$scope.width = 100;
$scope.$watch('width',
function(to, From){
$element.children(':First').width(to);
}
);
});
使用 $watch() 來綁定數據變化。
當然,這種樣式的問題,有更直接有效的手段, ng 的數據綁定總是讓人驚異:
<p ng-controller="TestCtrl">
<p style="width: 10px; height: 10px; background-color:red" ng-style="style">
</p>
<input type="text" name="width" ng-model="style.width" />
</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.style = {width: 100 + 'px'};
});
angular.bootstrap(document.documentElement,['app']);
</script>
1、數據->模板
數據到表現的綁定,主要是使用模板標記直接完成的:
<p>{{ w }} x{{ h }}</p>
使用 {{ }}這個標記,就可以直接引用,並綁定一個作用域內的變量。在實現上, ng 自動創建了一個 watcher。效果就是,不管因為什麼,如果作用域的變量發生了改變,我們隨時可以讓相應的頁面表現也隨之改變。我們可以看一個更純粹的例子:
<p id="test" ng-controller="TestCtrl">{{ a }}</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.a = '123';
});
angular.bootstrap(document.documentElement,['app']);
</script>
上面的例子在頁面載入之後,我們可以在頁面上看到 123。這時,我們可以打開一個終端控制器,輸入:
$('#test').scope().a= '12345';
$('#test').scope().$digest();
上面的代碼執行之後,就可以看到頁面變化了。
對於使用 ng進行的事件綁定,在處理函數中就不需要去關心 $digest() 的調用了。因為 ng 會自己處理。源碼中,對於 ng 的事件綁定,真正的處理函數不是指定名字的函數,而是經過 $apply() 包裝過的一個函數。這個 $apply()做的一件事,就是調用根作用域 $rootScope 的 $digest() ,這樣整個世界就清凈了:
<p id="test" ng-controller="TestCtrl"ng-click="click()">{{ a }}</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.a = '123';
$scope.click = function(){
$scope.a = '456';
}
});
angular.bootstrap(document.documentElement,['app']);
</script>
那個 click 函數的定義,綁定時變成了類似於:
function(){
$scope.$apply(
function(){
$scope.click();
}
)
}
這裡的 $scope.$apply()中做的一件事:
$rootScope.$digest();
2. 模板->數據
模板到數據的綁定,主要是通過 ng-model 來完成的:
<input type="text" id="test" ng-controller="TestCtrl"ng-model="a"/>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.a = '123';
});
angular.bootstrap(document.documentElement,['app']);
</script>
這時修改 input 中的值,然後再在控制終端中使用:
$('#test').scope().a
查看,發現變量 a 的值已經更改了。
實際上, ng-model是把兩個方向的綁定都做了。它不光顯示出變量的值,也把顯示上的數值變化反映給了變量。這個在實現上就簡單多了,只是綁定 change事件,然後做一些賦值操作即可。不過 ng 里,還要區分對待不同的控件。
3. 數據->模板->數據->模板
現在要考慮的是一種在現實中很普遍的一個需求。比如就是我們可以輸入數值,來控制一個矩形的長度。在這裡,數據與表現的關係是:
長度數值保存在變量中
變量顯示於某個 input 中
變量的值即是矩形的長度
input 中的值變化時,變量也要變化
input 中的值變化時,矩形的長度也要變化
當然,要實現目的在這裡可能就不止一種方案了。按照以前的做法,很自然地會想法,綁定input 的 change事件,然後去做一些事就好了。但是,我們前面提到過 ng-model 這個東西,利用它就可以在不手工處理 change 的條件下完成數據的展現需求,在此基礎之上,我們還需要做的一點,就是把變化后的數據應用到矩形的長度之上。
最開始,我們面對的應該是這樣一個東西:
<p ng-controller="TestCtrl">
<p style="width: 100px; height: 10px; background-color:red"></p>
<input type="text" name="width" ng-model="width" />
</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.width = 100;
});
angular.bootstrap(document.documentElement,['app']);
</script>
我們從響應數據變化,但又不使用 change事件的角度來看,可以這樣處理寬度變化:
angular.module('app',[], angular.noop)
.controller('TestCtrl',function($scope){
$scope.width = 100;
$scope.$watch('width',
function(to, from){
$element.children(':first').width(to);
}
);
});
使用 $watch() 來綁定數據變化。
當然,這種樣式的問題,有更直接有效的手段, ng 的數據綁定總是讓人驚異:
<p ng-controller="TestCtrl">
<p style="width: 10px; height: 10px; background-color:red" ng-style="style">
</p>
<input type="text" name="width" ng-model="style.width" />
</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('TestCtrl', function($scope){
$scope.style = {width: 100 + 'px'};
});
angular.bootstrap(document.documentElement,['app']);
</script>
覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!
以上是脚本宝典为你收集整理的js實例教程-AngularJS數據綁定代碼教程全部内容,希望文章能够帮你解决js實例教程-AngularJS數據綁定代碼教程所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。