ng-repeat循环出来的部分调用同一个函数并且实现每个模块之间不能相互干扰
使用場景：用ng-repeat幾個部分，每個部分調用同一個函數，但是每個模塊之間的功能不能相互干擾
問題：在用repeat實現.content塊repeat的時候打算這樣做：新建一個空的數組（nmber_arr），因為數組里面的length可以決定repeat出幾個content塊，這樣我就可以通過控制數組里面的length來實現repeat幾個.content塊；順著這個思路我做了一個add按鈕，希望在點擊add按鈕的時候number_arr的length會相應的增加一個，于是想到了用push操作：點擊一次按鈕往number_arr里面增加一個類容：代碼：
HTML：
<button class="btn btn-primary demo-btn" ng-click="host.add_input()">add</button>
<div class="content" ng-repeat="x in host.number_arr">
<button type="button" class="btn btn-primary" ng-click="host.add(x,'count')">add</button>
<button type="button" class="btn btn-primary" ng-click="host.dec(x,'count')">dec</button>
</div>
js：
vm.number_arr = [];
var number_object = {
count: 0
}
function add_input(){
if (vm.number_arr.length<3) {
vm.number_arr.push (number_object);
}
}
然后點擊add按鈕的時候只能出現一次repeat效果，于是就納悶了，，，，，
解決：angula repeat數組的時候里面的值是不能一樣的，比如：如果 vm.number_arr = [1,1,1];其實函數是會報錯的，因為里面的值是一樣的，而我這里bush進去的只是對象的一個指針，它們實際指向的是內存中的同一個值，看了網上的資料，如果可以在repeat后面加上：track by index：ng-repeat="x in host.number_arr track by $index"或者使用angular copy（）： vm.number_arr.push(angular.copy(number_object));這樣解決了repeat的問題
接下來做add和dec的部分：
問題：我是用數組對象里面的count的值關聯到input里面的value。所以這里我可以通過對count的操作實現對input輸入框value的控制，于是想到：將對對象數組里面的值作為參數傳到add和dec函數里面：
HTML：
<button type="button" class="btn btn-primary" ng-click="host.add(x.count)">add</button>
<button type="button" class="btn btn-primary" ng-click="host.dec(x.count)">dec</button>
js：
function add(num){
if (num < 500) {
num++;
}else{
num = 500;
}
};
然后給將函數加到按鈕上，點擊的時候input的值并沒有什么反應
解決：想起一句話：函數是按值傳遞的，這里x.count實際上就是一個值，把這個值作為一個參數傳給參數，函數會把這個值進行加減操作，但是要注意：其實這里的x.count在函數執行前后是沒有發生變化的，換句話說，函數只是將一個數字進行了加減操作，然后并不會返回什么，當然這樣就不會在視圖上有任何變化；換了個思路，改變參數的形式，讓函數的值能和數組對象里面的屬性值（count）相互關聯起來：
html:
<button type="button" class="btn btn-primary" ng-click="host.add(x,'count')">add</button>
<button type="button" class="btn btn-primary" ng-click="host.dec(x,'count')">dec</button>
js:
function add(obj,s){
if (obj[s] < 500) {
obj[s]++;
}else{
obj[s] = 500;
}
};
需要說明的一點：x in repeat中的x實際是：對應的那個對象,如果是第一條input那么就是對應的第一個數組對象：arr[0],實際上這是一個指針，因此我這里這里使用兩個參數，第一個是指針，用于函數和數組對象的屬性相互關聯，第二個參數是對應的屬性值，讓函數知道我操作的是對象的哪個值，需要說明的一點：引用數組對象的屬性值，我們一般是這樣的寫法：arr[0].count;但是我這里采用的是：arr[0]['count'],為什么采用這樣的方式呢：如果采用第一種方式。js代碼需要寫成：
js：function add(obj){
if (obj.count < 500) {
obj.count++;
}else{
obj.count = 500;
}
};
html：參數變成：x；
雖然在這個函數里面不會影響到功能，但是如果下次需要復用這個add函數就需要改變數組對象里面的屬性名和函數里面的的執行對象名，這樣不利于函數的復用
具體代碼：
html：
<!DOCTYPE html> <html><head><meta charset="utf-8"><link rel="stylesheet" href="src/bootstrap.min.css"><script src="src/angular.min.js"></script><script src="src/jquery.min.js"></script><script src="src/bootstrap.min.js"></script><script src="demo.js"></script><link rel="stylesheet" href="demo.css" /><style>input {display: inline-block;height: 30px;width: 300px}.content {height: 30px;margin-bottom: 20px;}button {height: 30px;line-height: 30px;}.demo-btn {display: block;width: 100%;margin-top: 30px;}</style> </head><body ng-app="myApp" ng-controller="formCtrl as host"><div class="container"><div class="content" ng-repeat="x in host.number_arr track by $index"><input type="text" ng-model="x.count" /><button type="button" class="btn btn-primary" ng-click="host.add(x,'count')">add</button><button type="button" class="btn btn-primary" ng-click="host.dec(x,'count')">dec</button></div><div ng-show="host.number_arr.length < 3"><span class="count">{{host.count}}</span><button class="btn btn-primary demo-btn" ng-click="host.add_input()">add</button></div></div> </body></html>js：
var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) {var vm = this;console.log(vm)//ng-repeat里面的內容不能是同一個值，如果是同一個值需要給repeat加上track by indexvm.add_input = add_input;vm.dec = dec;vm.add = add;vm.number_arr = [];var number_object = {count: 0}vm.count = 3;function add_input() {if (vm.number_arr.length < 3) {vm.number_arr.push(angular.copy(number_object)); //copy執行的操作是copy一份新的內存空間，返回的是這個新內存空間的一個指針//還有一點：如果不使用copy的話push到數組里面的只是一個指針，而這些指針指到的位置又是同一個內存空間，//但是angular是不允許repeat一個同樣的內存空間，//解決的方法一：repeat出來的需要給打上標記，通過track by index來實現，還有一種方法就是通過angularcopy的方法來解決vm.count = vm.count - 1;}}function dec(obj, s) { //因為函數是按值傳遞的，//應數組對象arr[{conunt: 0}]的方法有兩種：一：arr[0].count二：arr[0]['count'];//這里是使用第二種方法來實現加減的//為什么不使用第一種方式實現呢：第一種方式不利于函數復用if (obj[s] > 0) {obj[s]--;} else {obj[s] = 0;}};function add(obj, s) {if (obj[s] < 500) {obj[s]++;} else {obj[s] = 500;}};//第二種方式// function add(obj){// if (obj.count < 500) {// obj.count++;// }else{// obj.count = 500;// }// }; } )?
轉載于:https://www.cnblogs.com/wangrongxiang/p/6059935.html
總結
以上是生活随笔為你收集整理的ng-repeat循环出来的部分调用同一个函数并且实现每个模块之间不能相互干扰的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DP Intro - Tree DP E
- 下一篇： ngix 创建新的网站