CODEWITHSUNDEEP
angularjsangularjs-directive
Whisher
Whisher

Reputation: 32806

angular custom input number doesn't work

I dont really understand what's the problem in this code:

app.directive('counter', function() {
                return {
                    restrict: 'A',
                    scope:{},
                    template:'<div class="item-counter"><input type="text" data-ng-model="qnt"><span class="glyphicon glyphicon-chevron-up" data-ng-click="increment()"><span class="glyphicon glyphicon-chevron-down" data-ng-click="decrement()"></span><button type="button" class="btn btn-success">Aggiungi</button></div>',
                    controller: function($scope) {
                        $scope.qnt = 1;
                        $scope.increment = function() {
                            $scope.qnt++;
                        };
                        $scope.decrement = function() {
                            console.log($scope.qnt > 1);
                            if ($scope.qnt > 1) {
                                $scope.qnt--;
                            }
                            console.log($scope.qnt);
                        };
                    },
                    link: function(scope, element, attrs) {

                    }

                };
            });

the increment works the decrement doesn't work. What's wrong ?

http://plnkr.co/edit/BdFHpnrJnG4DFjTkmuZ0?p=preview

Upvotes: 0

Views: 57

Answers (1)

Abhishek Jain
Abhishek Jain

Reputation: 2977

You didn't had any closing tag for the increment span. Because of that, when the decrement code was being executed, increment code was also executing, nullifying the decrement.

template:'<div class="item-counter"><input type="text" data-ng-model="qnt"><span class="glyphicon glyphicon-chevron-up" data-ng-click="increment()"></span><span class="glyphicon glyphicon-chevron-down" data-ng-click="decrement()"></span><button type="button" class="btn btn-success">Aggiungi</button></div>',

Updated plunk here

Upvotes: 3

Related Questions