Custom template and ng-click Angular Formly

Question

I have a problem with a custom template that I made using Angular Formly. The template has one input text and two buttons for decrease and increase the model value of this input. The problem is that the down button works and decrease the model correctly, but the up button doesn't increase and instead performs the same action of $scope.down(). What am I wrong?

HTML Template:

  <span class="spinner">
    <button class="button decrease" ng-click="down()"></button>
    <input type="text" ng-model="model[options.key]" name="{{options.key}}" />
    <button class="button increase" ng-click="up()"></button>
  </span>

Formly Field:

item.key = key;
item.type = "my_spinner";
item.defaultValue = item.templateOptions.placeholder;
item.controller = function($scope) {
                        $scope.down = function () {
                          $scope.model[$scope.options.key] = $scope.model[$scope.options.key] - 1;
                        };
                        $scope.up = function () {
                          $scope.model[$scope.options.key] = $scope.model[$scope.options.key] + 1;
                        }
    };
}

Update: the code in JSBin seems to work http://jsbin.com/fakunoqeti/edit?html,js,console,output so what could it be the issue? I need an angular-formly expert D:D:

given the fact that it works now, it's hard to determine the issue.Any errors in console? — Satej S, Apr 20 '16 at 05:55
No errors. I just noticed that even click on text input rise the ng-click event that come first. It seems like an event propagation issue but trying to insert an $event.stopPropagation() doesn't make any difference... — Gabriele M. Ciolino, Apr 23 '16 at 07:50
I'd also like to know another way to do the same thing to bypass this particular problem. Any help would be very much appreciated! Thanks — Gabriele M. Ciolino, Apr 23 '16 at 12:52
try to use `parseInt` on `$scope.model[$scope.options.key]` before peforming add/minus operation. — Bharat Rathavi, Aug 15 '16 at 10:55

score 0 · Answer 1 · answered Mar 22 '17 at 16:14

why are your fields like that? that is not proper formly technique.

{
  key: 'myKey',
  type: 'my_spinner',
  defaultValue: 'to.placeholder',
  templateOptions: {
      placeholder: 'myValue'
  },
  controller: function($scope) {
     $scope.down = function () {
       $scope.model[$scope.options.key]--;
     };
     $scope.up = function () {
       $scope.model[$scope.options.key]++;
     };
  }
}

that's the first place I'd start...put it in the proper format.

Then, if that doesn't work, I'd pass in the $index property in the ng-click function: ng-click="up($index)" and then change function to $scope.up = function(index) {

Custom template and ng-click Angular Formly

1 Answers1