在javascript中遞增數組中的數字

Question

我正在嘗試向此可視化添加功能，以便從隱藏層增加或減少節點。 我添加了這個代碼：

為了增加或減少隱藏層中隱藏層的數量，正如我之前提到的。 但我沒有成功，因此，我需要一些幫助。 誰能告訴我這是如何完成的，我是否在正確的軌道上？

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

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 2

您可以通過事件綁定簡單地做到這一點。 對按鈕元素使用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 3

要專門在一層中添加或刪除節點，每一層都需要它的 + 和 - 按鈕。 當為 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 范圍內調用 addNodeToHiddenLayer() 或 removeNodeFromHiddenLayer() （或您可以訪問 vm.hiddenLayersDepths 數組的任何地方）。

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