ng-repeat循环出来的部分调用同一个函数并且实现每个模块之间不能相互干扰
使用場景：用ng-repeat幾個(gè)部分，每個(gè)部分調(diào)用同一個(gè)函數(shù)，但是每個(gè)模塊之間的功能不能相互干擾
問題：在用repeat實(shí)現(xiàn).content塊repeat的時(shí)候打算這樣做：新建一個(gè)空的數(shù)組（nmber_arr），因?yàn)閿?shù)組里面的length可以決定repeat出幾個(gè)content塊，這樣我就可以通過控制數(shù)組里面的length來實(shí)現(xiàn)repeat幾個(gè).content塊；順著這個(gè)思路我做了一個(gè)add按鈕，希望在點(diǎn)擊add按鈕的時(shí)候number_arr的length會(huì)相應(yīng)的增加一個(gè)，于是想到了用push操作：點(diǎn)擊一次按鈕往number_arr里面增加一個(gè)類容：代碼：
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);
}
}
然后點(diǎn)擊add按鈕的時(shí)候只能出現(xiàn)一次repeat效果，于是就納悶了，，，，，
解決：angula repeat數(shù)組的時(shí)候里面的值是不能一樣的，比如：如果 vm.number_arr = [1,1,1];其實(shí)函數(shù)是會(huì)報(bào)錯(cuò)的，因?yàn)槔锩娴闹凳且粯拥?#xff0c;而我這里bush進(jìn)去的只是對象的一個(gè)指針，它們實(shí)際指向的是內(nèi)存中的同一個(gè)值，看了網(wǎng)上的資料，如果可以在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的部分：
問題：我是用數(shù)組對象里面的count的值關(guān)聯(lián)到input里面的value。所以這里我可以通過對count的操作實(shí)現(xiàn)對input輸入框value的控制，于是想到：將對對象數(shù)組里面的值作為參數(shù)傳到add和dec函數(shù)里面：
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;
}
};
然后給將函數(shù)加到按鈕上，點(diǎn)擊的時(shí)候input的值并沒有什么反應(yīng)
解決：想起一句話：函數(shù)是按值傳遞的，這里x.count實(shí)際上就是一個(gè)值，把這個(gè)值作為一個(gè)參數(shù)傳給參數(shù)，函數(shù)會(huì)把這個(gè)值進(jìn)行加減操作，但是要注意：其實(shí)這里的x.count在函數(shù)執(zhí)行前后是沒有發(fā)生變化的，換句話說，函數(shù)只是將一個(gè)數(shù)字進(jìn)行了加減操作，然后并不會(huì)返回什么，當(dāng)然這樣就不會(huì)在視圖上有任何變化；換了個(gè)思路，改變參數(shù)的形式，讓函數(shù)的值能和數(shù)組對象里面的屬性值（count）相互關(guān)聯(lián)起來：
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;
}
};
需要說明的一點(diǎn)：x in repeat中的x實(shí)際是：對應(yīng)的那個(gè)對象,如果是第一條input那么就是對應(yīng)的第一個(gè)數(shù)組對象：arr[0],實(shí)際上這是一個(gè)指針，因此我這里這里使用兩個(gè)參數(shù)，第一個(gè)是指針，用于函數(shù)和數(shù)組對象的屬性相互關(guān)聯(lián)，第二個(gè)參數(shù)是對應(yīng)的屬性值，讓函數(shù)知道我操作的是對象的哪個(gè)值，需要說明的一點(diǎn)：引用數(shù)組對象的屬性值，我們一般是這樣的寫法：arr[0].count;但是我這里采用的是：arr[0]['count'],為什么采用這樣的方式呢：如果采用第一種方式。js代碼需要寫成：
js：function add(obj){
if (obj.count < 500) {
obj.count++;
}else{
obj.count = 500;
}
};
html：參數(shù)變成：x；
雖然在這個(gè)函數(shù)里面不會(huì)影響到功能，但是如果下次需要復(fù)用這個(gè)add函數(shù)就需要改變數(shù)組對象里面的屬性名和函數(shù)里面的的執(zhí)行對象名，這樣不利于函數(shù)的復(fù)用
具體代碼：
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里面的內(nèi)容不能是同一個(gè)值，如果是同一個(gè)值需要給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執(zhí)行的操作是copy一份新的內(nèi)存空間，返回的是這個(gè)新內(nèi)存空間的一個(gè)指針//還有一點(diǎn)：如果不使用copy的話push到數(shù)組里面的只是一個(gè)指針，而這些指針指到的位置又是同一個(gè)內(nèi)存空間，//但是angular是不允許repeat一個(gè)同樣的內(nèi)存空間，//解決的方法一：repeat出來的需要給打上標(biāo)記，通過track by index來實(shí)現(xiàn)，還有一種方法就是通過angularcopy的方法來解決vm.count = vm.count - 1;}}function dec(obj, s) { //因?yàn)楹瘮?shù)是按值傳遞的，//應(yīng)數(shù)組對象arr[{conunt: 0}]的方法有兩種：一：arr[0].count二：arr[0]['count'];//這里是使用第二種方法來實(shí)現(xiàn)加減的//為什么不使用第一種方式實(shí)現(xiàn)呢：第一種方式不利于函數(shù)復(fù)用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;// }// }; } )?
轉(zhuǎn)載于:https://www.cnblogs.com/wangrongxiang/p/6059935.html
總結(jié)
以上是生活随笔為你收集整理的ng-repeat循环出来的部分调用同一个函数并且实现每个模块之间不能相互干扰的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DP Intro - Tree DP E
- 下一篇： ngix 创建新的网站