Javascript计数函数的最大值并提交最大值答案

【问题标题】：Max value for Javascript count function & submit on maxJavascript计数函数的最大值并提交最大值
【发布时间】：2017-12-15 23:10:36
【问题描述】：

我想将此计数功能限制为仅允许选择 3 个项目并在选择 3 个后提交。我在我的 HTML 中使用 ng-click="cuisine.selected = !cuisine.selected"。

$scope.select_cuisine = function(cuisine_id){
  var count=0;
  for (let i=0; i<$scope.cuisines.length; i++) {
    if ($scope.cuisines[i].selected) count++;
  }
  return count;
}

有没有简单的方法可以做到这一点？

【问题讨论】：

当一个项目被选中或取消选中时递增或递减一个计数器。

标签： javascript angularjs function counter

【解决方案1】：

您可以使用另一个if 语句来检查count。如果count === 3，那么return。

var cuisine = [true, false, false, true, false, true, false, false, true];

var countTilThree = function(cuisine) {
  var count = 0;

  for (let i = 0; i < cuisine.length; i++) {
    if (cuisine[i] === true)
      count++;
   
    if(count === 3)
      return count;
  }
  return count;
}

console.log(countTilThree(cuisine));

【讨论】：

【解决方案2】：

我会做这样的事情。创建一个数组来存储您的选择。在每个选择中，检查它是否已经被选中。如果不是，请确保未达到最大值，然后添加它。如果该项目已在数组中（已选中），则将其从数组中删除。这反过来又将它的长度设置回 1，以便您可以添加另一个。

这是一个演示：

angular.module('app', []);

angular.module('app')
  .controller('Controller', function($scope) {

    $scope.selectedIds = [];
    $scope.selectCuisine = function(cuisine_id) {

      var idx = $scope.selectedIds.indexOf(cuisine_id);

      if (idx === -1) {
        // don't have the id, add operation

        if ($scope.selectedIds.length < 3) {
          // we're in range, do something with the selected ID
          $scope.selectedIds.push(cuisine_id);
        } else {
          // notify the user somehow
          console.warn('max selection reached');
        }
      } else {
        // already have the id, so we remove it
        $scope.selectedIds.splice(idx, 1);
      }
    }

  });

<!doctype html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  <script src="example.js"></script>
</head>

<body>

  <div ng-controller="Controller">

    <button ng-click="selectCuisine(1)">Select 1</button>
    <button ng-click="selectCuisine(2)">Select 2</button>
    <button ng-click="selectCuisine(3)">Select 3</button>
    <button ng-click="selectCuisine(4)">Select 4</button>

    <h4 ng-show="selectedIds.length === 3">No more! Remove one first!</h4>

    <h4>Selected IDS</h4> {{ selectedIds }}

  </div>
</body>

</html>

【讨论】：

【解决方案3】：

如果当前选中的项目数为 3 且未选中该项目，则最好的方法是禁用复选框。

每次用户选择项目时，更新 $scope.count。

设置 ng-enable='item.selected ||计数

【讨论】：