快捷導(dǎo)航

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

更新時(shí)間：2016年09月05日 11:49:23 作者：MakingChoice

這篇文章給大家介紹了利用AngularJs如何實(shí)現(xiàn)ng-repeat內(nèi)各個(gè)小的子作用域單獨(dú)數(shù)據(jù)綁定。有需要的小伙伴們可以參考借鑒，下面來(lái)一起看看吧。

照例先看效果

下面是這個(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í)方法非常簡(jiǎn)單，只需要在每個(gè)ng-repeat中傳入具體的每一個(gè)數(shù)據(jù)分組就可以實(shí)現(xiàn)，例如本例子中的ng-change="changeNum1(con)"<code/>這樣就實(shí)現(xiàn)了單獨(dú)的小的數(shù)據(jù)作用域的控制。

以上就是這篇文章的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)或使用AngularJS能有所幫助，如果有疑問(wèn)可以留言交流。

您可能感興趣的文章:

相關(guān)文章

將angular-ui的分頁(yè)組件封裝成指令的方法詳解
這篇文章主要給大家介紹了將angular-ui的分頁(yè)組件封裝成指令的方法，文中介紹的非常詳細(xì)，相信會(huì)對(duì)大家的學(xué)習(xí)或者工作覺(jué)有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。
2017-05-05
詳解angular 中的自定義指令之詳解API
本篇文章主要介紹了angular 中的自定義指令之詳解API，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
對(duì)angularJs中自定義指令replace的屬性詳解
今天小編就為大家分享一篇對(duì)angularJs中自定義指令replace的屬性詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
Angular?ViewChild組件間通信demo
這篇文章主要為大家介紹了Angular?ViewChild組件間通信demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
AngularJS實(shí)時(shí)獲取并顯示密碼的方法
這篇文章主要介紹了AngularJS實(shí)時(shí)獲取并顯示密碼的方法,涉及AngularJS數(shù)據(jù)綁定及顯示相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02
關(guān)于 angularJS的一些用法
這篇文章主要介紹了關(guān)于 angularJS的一些用法的相關(guān)資料,需要的朋友可以參考下
2017-11-11
Angular中使用Intersection Observer API實(shí)現(xiàn)無(wú)限滾動(dòng)效果
這篇文章主要介紹了Angular中使用Intersection Observer API實(shí)現(xiàn)無(wú)限滾動(dòng),實(shí)現(xiàn)原理為在data下面加一個(gè)loading元素如果此元素進(jìn)入視窗則調(diào)用api獲取新的數(shù)據(jù)加到原來(lái)的數(shù)據(jù)里面,這時(shí)loading就會(huì)被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧
2023-12-12
Angular設(shè)計(jì)模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化
這篇文章主要為大家介紹了Angular設(shè)計(jì)模式hierarchical?injector實(shí)現(xiàn)代碼復(fù)用模塊化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
Angular2中select用法之設(shè)置默認(rèn)值與事件詳解
在Angular.JS中可以使用數(shù)組或?qū)ο髣?chuàng)建一個(gè)下拉列表選項(xiàng)。關(guān)于Angular.js中select的基礎(chǔ)相信大家應(yīng)該都已經(jīng)了解了，那么下面這篇文章主要給大家介紹了Angular2中select用法之設(shè)置默認(rèn)值與事件的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-05-05