跟踪数组中被删除的索引

keeping track of the removed indices of an array javascript

本文关键字：索引 删除 数组 跟踪      更新时间：2023-09-26

我有一个文本框和复选框的表单。当我将值填充到复选框中时，该值被推入数组。当我选中复选框时，该值将从该数组中删除。这是我的工作代码笔。

这是我的表单代码

<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));
    }
  }
})

问题是，当我从数组中删除值并再次选中复选框时，它将值推到最后。是否有可能保留该值在数组中的原始位置?

传递toggleCheckBox中的项索引，并根据传递的索引和您想要的值设置数组项的值，如:

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

但是请确保当您想使用数组来遍历它并拼接具有undefined值的项时

为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);
  }
})

理论上，您可以为数组中的特定索引添加值:

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]

这样，您可以按顺序呈现复选框，并根据存储对象的true/false值将它们设置为checked。希望对你有帮助。

注意:在上面的代码中，我假设this指的是复选框的HTML元素

JavaScript对象属性顺序永不改变

因此，您可以创建一个对象来维护顺序，并遍历Object.keys()以根据相应的value或false填充数组values:

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);
    };
  });

在视图中，我为所有复选框添加了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查看完整的解决方案

相关文章：