带限制和休息选项的手动计数器

Question

我有以下用于手动计数器的代码。我如何让它停在零，这样它就不会变成负数？当为零时，需要一个重置按钮将值设置回 350。或者，有更好的方法吗？

<body ng-app>
  <button ng-click="myCount = myCount - 1 " ng-init="myCount=350">
    Click to decrement by 1
  </button>

  <h2>
        Total Count: {{myCount}}
  </h2>
  
</body>

Answer 1

你有三种方法：

无需在 ng-click 中调用纯 js 代码，您只需在控制器中调用一个函数即可
当变量重新变为 0

ng-disabled="myCount === 0"

你可以在表达式 myCount = (myCount === 0) ? 0 : myCount - 1 中加上一行 if。读起来和 if(myCount === 0){ myCount = 0}else{myCount = myCount - 1}

为了将来进行更多扩展，我建议将解决方案 1 与 2 结合使用以实现 UX。

对于重置按钮，您可以在 myCount === 0 时将其放在 ng-show 上。请注意，ng-if 将不起作用，因为单击会在操作发生之前从 DOM 中删除按钮，因此 angular 会阻止它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app>
  <button 
  ng-click="myCount = (myCount === 0) ? 0 : myCount - 1" 
  ng-init="myCount=5" 
  ng-disabled="myCount === 0">
        Click to decrement by 1
      </button>
  <h2>
    Total Count: {{myCount}}
  </h2>
  <button ng-click="myCount = 5" ng-show="myCount === 0">Reset</button>
</body>

带限制和休息选项的手动计数器

Manual counter with limit and rest option

angularjs

ionic3