入力フィールドとadd/minusボタンを使って出力を調整するAngularJS

Question

これは初めてのanglejsです 私はサンプルコードを作成しようとしています。ユーザーがフィールドに数値を入力するか、数ではなくを減らす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

数を検証するために三項演算を使用するには、この

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

とに機能を追加し、プラスボタンを好きで、

<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を使用して、数値型入力の最小値を制御できます。