ng-repeat循環出來的部分調用同一個函數而且實現每一個模塊之間不能相互干擾

時間 2019-12-11

標籤 repeat 循環出來部分調用同一個函數而且實現每一個模塊之間不能相互干擾简体版

原文原文鏈接

使用場景：用ng-repeat幾個部分，每一個部分調用同一個函數，可是每一個模塊之間的功能不能相互干擾css

問題：在用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

具體代碼：jquery

html：bootstrap

<!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 index
        vm.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;
        //     }
        // };
    }
)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。