Javascript 跟踪已删除的数组索引

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

这是我的表格代码

<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>

---

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

在

toggleCheckBox

中传递项索引，并根据传递的索引和所需的值设置数组项的值：

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

---

但是，请确保何时要使用数组对其进行迭代，并使用

未定义的值拼接项目。
在
切换复选框中传递项目索引，并根据传递的索引和所需的值设置数组项目的值，如：

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

但是，当您要使用数组在其上迭代并拼接具有
未定义值的项时，请确保。
将第三个参数添加到带有位置的
切换复选框中-类似于：

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

使用位置将第三个参数添加到
toggleCheckBox
-类似于：

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

理论上，可以向数组中的特定索引添加值：

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">

这会产生这样一个对象：

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

然后，如果要从该对象中获取具有true和/或false值的数组，请使用：

通过这种方式，您可以按顺序呈现复选框，并根据存储对象的真/假值将其设置为选中。希望这有帮助

注意：在上面的代码中，我假设
此
引用复选框的HTML元素
理论上，您可以向数组中的特定索引添加值：

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">

这会产生这样一个对象：

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

然后，如果要从该对象中获取具有true和/或false值的数组，请使用：

通过这种方式，您可以按顺序呈现复选框，并根据存储对象的真/假值将其设置为选中。希望这有帮助

注意：在上面的代码中，我假设
此
引用复选框的HTML元素
JavaScript对象属性顺序永不更改

因此，您可以创建一个对象来维持顺序，并根据
值
或
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);
    };
  });

在视图中，我为所有复选框添加了一个
索引
，即
离子复选框的编号
：

<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>



查看完整的解决方案。
JavaScript对象属性顺序永不更改

因此，您可以创建一个对象来维持顺序，并根据
值
或
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);
    };
  });

在视图中，我为所有复选框添加了一个
索引
，即
离子复选框的编号
：

<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>



检查完整的解决方案。
文本框控件的数量是否固定为最多4个，或者是否可以根据最终用户的意愿超出该数量？文本框控件的数量是否固定为最多4个，或者是否可以根据最终用户的意愿超出该数量？谢谢@Yosvel Quintero，但是如果我更改该字段的值，它只是将值推送到数组的最后一个索引，而不是修改上一个值。右。。我没有考虑修改后的值。。此解决方案的另一个问题是，当表单字段包含相同的值时，不会将重复值推送到数组中。这在上次解决方案更新中得到解决。。选中pleaseThanks@Yosvel Quintero，但如果我更改字段的值，它只会将值推送到数组的最后一个索引，而不是修改以前的值。您的权利。。我没有考虑修改后的值。。此解决方案的另一个问题是，当表单字段包含相同的值时，不会将重复值推送到数组中。这在上次解决方案更新中得到解决。。支票，请