在javascript中增加数组中的数字

Question

我正在尝试向此visualization 添加功能，以增加或减少隐藏层中的节点。我添加了这段代码：

如前所述，为了增加或减少隐藏层中的隐藏层数。但我没有成功，因此，我需要一些帮助。谁能告诉我这是如何完成的，我在正确的轨道上吗？

for (var i = 0; i < vm.hiddenLayersDepths[hiddenLayerLoop]; i++) {
    function minus() {
        vm.hiddenLayersDepths.map(function(val){return --val;});
        //Arrays.fill(vm.hiddenLayersDepths, vm.hiddenLayersDepths[0] - 1);
    }

    function plus() {
        if (vm.hiddenLayersDepths[0] < 5) {
            vm.hiddenLayersDepths.map(function(val){return ++val;});
            //Arrays.fill(vm.hiddenLayersDepths, vm.hiddenLayersDepths[0] + 1);
        }
    }
}

编辑：我希望 + 或 - 独立用于每个隐藏层。

Answer 1

您可以通过事件绑定简单地做到这一点。将ng-click 与您的按钮元素一起使用，并在您的控制器中添加相应的方法。

<input type="button" value="-" id="moins" ng-click="vm.decrementHiddenLayerCount()">
<input type="button" value="+" id="plus" ng-click="vm.incrementHiddenLayerCount()">

在您的控制器中添加相应的事件处理程序。在事件处理程序中，您只需要增加 ngModel 值。它将使您的视图和模型保持同步。我在下面添加了您需要添加事件处理程序的代码。

app.controller('MainCtrl', function( $scope, $interval, $window, $q ) {
    var vm = this;

vm.incrementHiddenLayerCount = function() {
  const hiddenValue = vm.hiddenLayerCountSlider.value;
  if (hiddenValue < vm.hiddenLayerCountSlider.options.ceil) {
    vm.hiddenLayerCountSlider.value += 1;
    vm.hiddenLayersCount = vm.hiddenLayerCountSlider.value;
    draw();
  }
  }

  vm.decrementHiddenLayerCount = function() {
    debugger;
    const hiddenValue = vm.hiddenLayerCountSlider.value;
    if (hiddenValue > vm.hiddenLayerCountSlider.options.floor) {
     vm.hiddenLayerCountSlider.value -= 1;
    vm.hiddenLayersCount = vm.hiddenLayerCountSlider.value;
    draw(); 
    }
  }

请在此处找到工作代码：https://codepen.io/jasdeep7991/pen/mdJayKg

Answer 2

Array.prototype.map()

map() 方法创建一个新数组，其中填充了 在调用数组中的每个元素上调用提供的函数。

因此，将值重新分配给 hiddenLayersDepths。

vm.minus = function() {
  vm.hiddenLayersDepths = vm.hiddenLayersDepths.map((i) => i - 1);
  draw();
};

vm.plus = function() {
  vm.hiddenLayersDepths = vm.hiddenLayersDepths.map((i) => i + 1);
  draw();
};

工作演示

https://codepen.io/aswinkumar863/pen/ZEGVYBp

Answer 3

要专门从 ONE 层添加或删除节点，每个层都需要其 + 和 - 按钮。在为 hiddenLayersCount 中的每个索引生成这些单独的按钮时，我将从该组 + 和 - 按钮添加一个“数据集”连接到与其相关的图层。因此，在有两个隐藏层的情况下，在使用 js 添加按钮后，您最终会得到类似于 HTML 中的按钮：

<div class"plus-minus-container">
  <input data-id="0" type="button" value="-" class="minus-button">
  <input data-id="0" type="button" value="+" class="plus-button">
</div>

<div class"plus-minus-container">
  <input data-id="1" type="button" value="-" class="minus-button">
  <input data-id="1" type="button" value="+" class="plus-button">
</div>

在使用 js 添加它们时，您可以为每个添加点击侦听器，在 vm 范围内（或您可以访问 vm.hiddenLayersDepths 数组的任何地方）调用 addNodeToHiddenLayer() 或 removeNodeFromHiddenLayer()。

function addNodeToHiddenLayer(event){
  const layerIndex = parseInt(event.target.dataset.id,10);

  if (vm.hiddenLayersDepths[layerIndex] < 5) {
    vm.hiddenLayersDepths[layerIndex] += 1;
  }
}

function removeNodeToHiddenLayer(event){
  const layerIndex = parseInt(event.target.dataset.id,10);
  if (vm.hiddenLayersDepths[layerIndex] > 1) {
    vm.hiddenLayersDepths[layerIndex] -= 1;
  }
}