JSFiddle - React, Tailwind, and code Playground

by mrajcok

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div data-ng-app="workWithNumbers" data-ng-controller="numbersCtrl">
    <div class="anItem" data-ng-repeat="itm in items">
        <label data-ng-bind="itm.title">Title</label>
        <input type="number" min="0" max="{{maxValue}}" data-ng-model="itm.qty" whole-number>
    </div>
    <p data-ng-bind-template="Number of baseballs: {{getBaseballs()}}"></p>
    <p data-ng-bind-template="Number of footballs: {{getFootballs()}}"></p>
</div>

JavaScript

var app, numbersCtrl;

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

numbersCtrl = function($scope) {
    $scope.maxValue = 1000;
    $scope.items = [{
        "title": "baseball",
        "qty": 2},
    {
        "title": "football",
        "qty": 4}];
    $scope.getBaseballs = function() {
        return $scope.items[0].qty;
    };
    $scope.getFootballs = function() {
        return $scope.items[1].qty;
    };
};

app.directive('wholeNumber', function() {
    return {
        link: function(scope, elem, attrs) {
            elem.on("blur", function() {
                var num = Math.abs(parseInt(elem.val(), 10));
                num = num > scope.maxValue ? 0 : num;
                scope.itm.qty = num
                scope.$apply(); // update view
            });
        }
    };
});