Ручной счетчик с возможностью ограничения и отдыха - PullRequest
Новая
       13

Ручной счетчик с возможностью ограничения и отдыха

0 голосов
/ 10 июля 2020

У меня есть следующий код для ручного счетчика. Как мне заставить это остановиться на нуле, чтобы он не превращался в go в минусовые числа? Когда на ноль, нужна кнопка сброса, чтобы установить значение обратно на 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>

1 Ответ

1 голос
/ 11 июля 2020

У вас есть три метода:

  1. Вместо вызова чистого js кода в ng-click вы можете просто вызвать функцию в контроллере
  2. Вы можете отключить кнопку с помощью ng-disabled="myCount === 0", когда переменная имеет значение 0
  3. Вы можете поместить однострочное if в выражение myCount = (myCount === 0) ? 0 : myCount - 1. Это читается в точности как if(myCount === 0){ myCount = 0}else{myCount = myCount - 1}

Для дальнейшего расширения в будущем я рекомендую решение 1 в сочетании с 2 для UX.

Для кнопки сброса вы можете поставить его с ng-show когда myCount === 0. Будьте осторожны, чтобы 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...