AngularJS實(shí)現(xiàn)單獨(dú)作用域內(nèi)的數(shù)據(jù)操作
照例先看效果

下面是這個(gè)例子的代碼:
<!DOCTYPE html>
<html lang="en" ng-app="scApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
</head>
<body ng-controller="scController">
<div>
<div ng-repeat="con in content">
<input type="text" ng-model="con.num1" ng-change="changeNum1(con)"/>
<input type="text" ng-model="num2" value="con.num2"/>
<input type="text" ng-model="con.total" ng-change="changeTotal(con)"/>
</div>
</div>
</body>
<script>
var app=angular.module("scApp",[])
.controller("scController",["$scope", function ($scope) {
$scope.num2=2;
$scope.content=[
{
num1:1,
num2:3,
total:3,
},
{
num1:2,
num2:3,
total:6,
},
{
num1:1,
num2:6,
total:6,
}
];
$scope.changeNum1= function (con) {
con.total=con.num1*con.num2;
};
$scope.changeTotal= function (con) {
con.num1=con.total/con.num2;
}
}])
</script>
</html>
總結(jié)
其實(shí)方法非常簡單,只需要在每個(gè)ng-repeat中傳入具體的每一個(gè)數(shù)據(jù)分組就可以實(shí)現(xiàn),例如本例子中的ng-change="changeNum1(con)"<code/>這樣就實(shí)現(xiàn)了單獨(dú)的小的數(shù)據(jù)作用域的控制。
以上就是這篇文章的全部內(nèi)容,希望對(duì)大家學(xué)習(xí)或使用AngularJS能有所幫助,如果有疑問可以留言交流。
相關(guān)文章
AngularJs bootstrap搭載前臺(tái)框架——準(zhǔn)備工作
本文主要介紹AngularJs bootstrap搭載前臺(tái)框架,這里對(duì)Bootstrap 搭載環(huán)境,及注意事項(xiàng)做了講解,有需要的小伙伴可以參考下2016-09-09
使用AngularJS對(duì)路由進(jìn)行安全性處理的方法
這篇文章主要介紹了使用AngularJS對(duì)路由進(jìn)行安全性處理的方法,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下2015-06-06
Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁代碼
最近一直在學(xué)習(xí)angularjs相關(guān)知識(shí),在學(xué)習(xí)過程中寫了一個(gè)小demo,下面把代碼思路分享給大家,感興趣的朋友一起學(xué)習(xí)2016-04-04
AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法
今天小編就為大家分享一篇AngularJs1.x自定義指令獨(dú)立作用域的函數(shù)傳入?yún)?shù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表
這篇文章主要介紹了angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
Angular6項(xiàng)目打包優(yōu)化的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于Angular6項(xiàng)目打包優(yōu)化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angular6具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié)
這篇文章主要介紹了關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
AngularJS解決ng界面長表達(dá)式(ui-set)的方法分析
這篇文章主要介紹了AngularJS解決ng界面長表達(dá)式(ui-set)的方法,通過具體問題的分析并結(jié)合實(shí)例形式給出了AngularJS長表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11

