跟蹤數組中的已刪除索引javascript

Question

我有一個帶有文本框和複選框的窗體。當我填充值到複選框，值被推入到數組中。當我取消選中複選框時，該值將從該數組中刪除。 這是我的工作code pen.

這是我的表單代碼

<label class="item item-input"> 
    <input type="text" placeholder="In a word, what is important to you?" ng-model="values.first" > 
    <ion-checkbox ng-click="toggleCheckBox(success.first,values.first)" ng-change="show2='true'" ng-model="success.first" 
      ng-disabled="!values.first" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox> 
    </label> 

    <label class="item item-input" ng-show="show2" ng-class="{'animated-custom slideInLeft':success.first}"> 
    <input type="text" placeholder="What else is important to you?" ng-model="values.second" > 

    <ion-checkbox class="checkbox-royal" ng-model="success.second" ng-click="toggleCheckBox(success.second,values.second)" ng-change="show3='true'" ng-disabled="!values.second" style="border: none;padding-left: 30px;"></ion-checkbox> 
    </label> 

    <label class="item item-input" ng-show="show3" ng-class="{'animated-custom slideInLeft':success.second}"> 
    <input type="text" placeholder="What else is important to you?" ng-model="values.third"> 

    <ion-checkbox class="checkbox-royal" ng-model="success.third" ng-click="toggleCheckBox(success.third,values.third)" ng-change="show4='true'" ng-disabled="!values.third" style="border: none;padding-left: 30px;"></ion-checkbox> 
    </label> 

    <label class="item item-input" ng-show="show4" ng-class="{'animated-custom slideInLeft':success.third}"> 
    <input type="text" placeholder="What else is important to you?" ng-model="values.four"> 

    <ion-checkbox class="checkbox-royal" ng-model="success.four" ng-click="toggleCheckBox(success.four,values.four)" ng-change="show5='true'" ng-disabled="!values.four" style="border: none;padding-left: 30px;"></ion-checkbox> 
    </label> 

這是控制器代碼，

.controller('myctrl',function($scope){ 
    var values=[]; 
    $scope.toggleCheckBox=function(isChecked, value){ 
    if(isChecked){ 
     values.push(value); 
     console.log(values); 
    }else{ 
     var currentIndex = values.indexOf(value); 
     values.splice(currentIndex, 1); 
     console.log(values); 
     //console.log(values.indexOf(value)); 
    } 
    } 
}) 

的問題是，當我從數組中刪除的價值，並再次檢查複選框，它將值推到最後。是否有可能在數組中保留該值的原始位置？

Answer 1

傳入toggleCheckBox項目索引並設置要喜歡這取決於通過索引數組項的值和值：

var x = Array(); 
var index = 2; 
x[index] = 'A'; 
console.log(x); 

但要確保，當你想使用數組遍歷並用undefined值拼接項目。

Answer 2

添加第三個參數toggleCheckBox與位置 - 是這樣的：

... 
<ion-checkbox class="checkbox-royal" ng-model="success.four" ng-click="toggleCheckBox(success.four,values.four,4)" 
... 

，並在你的控制器：

.controller('myctrl',function($scope){ 
    var values=[]; 
    $scope.toggleCheckBox=function(isChecked, value, pos){ 
    if(isChecked){ 
     values[pos] = value; 
    }else{ 
     values[pos] = null; 
    } 
    console.log(values); 
    } 
}) 

Answer 3

從理論上講，你可以在一個值添加到特定索引array：

let arr = ['foo', 'bar']; 
arr[3] = 'baz'; // 0 and 1 are taken 
console.log(arr); //=> ['foo', 'bar', undefined, 'baz'] 

但是，這並不推薦使用。在JavaScript中，數組是數字索引，嘗試解決此問題很快就會出現問題。

你需要的是一個對象。如果你的名字你輸入：

<input name="some_checkbox_1"> 

...並使用這些名字來創建一個對象：

$scope.toggleCheckBox=function(isChecked, value){ 
    values[this.name] = isChecked; 
} 

導致的對象是這樣的：

{ some_checkbox_1: true, some_checkbox_2: false } // this is the `values` variable 

如果再想用真值和/或假值從這個對象中取出數組，請使用Object.values()：

Object.values(values); //=> [true, false] 

這樣，您可以按順序渲染複選框，並根據存儲對象的真/假值將它們設置爲checked。希望這可以幫助。

注：以上我認爲this指複選框的HTML元素的代碼

Answer 4

JavaScript對象的屬性順序不會改變

所以，你可以創建一個對象來維持秩序，遍歷Object.keys()填充陣列values基於value或false風琴：

angular 
    .module('ionicApp', ['ionic']) 
    .controller('myctrl', function ($scope) { 
    var values = [], 
     obj = {}; 

    $scope.toggleCheckBox = function (isChecked, value, index) { 
     values = []; // Clean the values 
     obj[index] = (isChecked) ? value : false; 
     Object.keys(obj).forEach(function (k) { 
      obj[k] && values.push(obj[k]); // Fill the ordered values 
     }); 

     console.clear(); 
     console.log(values); 
    }; 
    }); 

在veiew，我增加了一個index所有的複選框，這是ion-checkbox數量：

<ion-checkbox 
    ng-click="toggleCheckBox(success.first,values.first, 1)" 
    ng-change="show2='true'" 
    ng-model="success.first" 
    ng-disabled="!values.first" 
    style="border: none;padding-left: 30px;" 
    class="checkbox-royal"> 
</ion-checkbox> 

檢查在Code Pen完整的解決方案。