快捷導(dǎo)航

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

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

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

照例先看效果

下面是這個例子的代碼：

<!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é)

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

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

您可能感興趣的文章:

相關(guān)文章

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