用输入栏和添加/减号按钮调整输出AngularJS

Question

这是我第一次使用angularjs 我试图做一个示例代码，其中用户可以在该字段上放置一个数字，或者他可以使用该按钮来增加/减少数量，但不低于0

<div data-ng-app='CountApp' data-ng-controller='CountCtrl'> 
    <div class="outside-border"> 
    <input id="output_test" type="text" ng-model="count" style="width: 150px;"> 
    <div class="minus"> 
     <button class="button" id="test_sample" data-ng-click='count = count - 1'>-</button> 
    </div> 
    <div class="add"> 
     <button class="button" data-ng-click='count = count + 1'>+</button> 
    </div> 
    </div> 
</div> 



var app = angular.module('CountApp', []); 

app.controller('CountCtrl', function($scope) { 
    $scope.count = 1; 
}); 

目前正在发生的事情是，每当有在球场上和用户点击+按键没有数，输出为1111111 或者如果用户输入的数字（例如35）输出变成3511111 有人可以解释或帮助我这方面。

这是我迄今所做https://jsfiddle.net/wbuh2hrd/

Answer 1

使用三元操作验证计数小于0或者不喜欢这个

<button class="button" id="test_sample" data-ng-click='count = (count <= 0) ? 0 : count-1' >-</button> 

，并添加功能，加号按钮和投字符串为int

<button class="button" data-ng-click='plusCount()'>+</button> 
$scope.plusCount = function(){ 
    $scope.count = parseInt($scope.count) + 1; 
} 

Demo

Answer 2

有很多方法来解决这个问题，其中之一是改变你的输入类型type="number"

如果你不喜欢出现，当按钮你在某些浏览器上的鼠标悬停，你可以使用css隐藏它（http://www.thatstevensguy.com/programming/disable-arrows-on-number-inputs/）

编辑：您可以使用min=0来控制数字类型输入中的最小值。