angularjs input fill issue

Question

trying to make a simple calculator, but have some issues. So i can not fill the input value by keyboard, also i have two errors ([ngModel:nonassign] when i load the page ,and when i am trying to fill by keyboard the input value -

this.$$ngModelSet is not a function

I hope someone can help me out.

<div class="container" ng-controller="calcCtrl">
    <div class="content">
    <br><br><br>
    <input type="text" ng-model="formula.join('')" ></input>
    <br><br><span class="content_tab tab"></span> <br>
    <button  ng-click='add(7)'>7</button>
    <button  ng-click='add(8)'>8</button>
    <button  ng-click='add(9)'>9</button>
    <button  ng-click='add("/")'>/</button>
    <br>
    <button  ng-click='add(4)'>4</button>
    <button ng-click='add(5)'>5</button>
    <button  ng-click='add(6)'>6</button>
    <button  ng-click='add("*")'>*</button>
    <br>
    <button  ng-click='add(1)'>1</button></td>
    <button  ng-click='add(2)'>2</button></td>
    <button  ng-click='add(3)'>3</button></td>
    <button  ng-click='add("-")'>-</button></td>
    <br>
    <button  ng-click='add(0)'>0</button>
    <button  ng-click='add(".")'>.</button>
    <td rowspan='2'><button  ng-click='add("+")'>+</button>
    <button ng-click="eval()">=</button>
    <br>
    <button  ng-click="remove()">CLEAR</button>
</div>

app.controller('calcCtrl',  function($scope) {
    $scope.formula = ['0'];
    $scope.add = function(item) {
    if ($scope.formula == '0') $scope.formula = [item];
    else $scope.formula.push(item);
};
    $scope.remove = function() {
    $scope.formula.pop();
    if($scope.formula.length == 0) $scope.formula = ['0'];
};
    $scope.eval = function() {
    var result = eval($scope.formula.join(''));
    $scope.formula = [result];
};

    });

Fetrarij · Accepted Answer · 2017-07-04 17:27:03Z

1

You get that error because you didn't put a variable assignable in ng-model. So change ng-model="formula.join('')" to use a variable: eg: ng-model="total"

and in your controller, for each calculation, just assign this variable to formula.join('')

$scope.add = function(item) {
    if ($scope.formula == '0') $scope.formula = [item];
    else $scope.formula.push(item);
    $scope.total = $scope.formula.join('');
  };
  $scope.remove = function() {
    $scope.formula.pop();
    if ($scope.formula.length == 0) $scope.formula = ['0'];
    $scope.total = $scope.formula.join('');
  };
  $scope.eval = function() {
    var result = eval($scope.formula.join(''));
    $scope.formula = [result];
    $scope.total = $scope.formula.join('');
  };

edited Jul 4, 2017 at 17:27

answered Jul 4, 2017 at 17:12

Fetrarij

7,3463 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shoopik Over a year ago

i changed my code to that, but it doesnt work correctly though, now its like 2 different values in tab, i mean when i type something by keyboard, the value that was there typing by buttons, just hide and show me the value (keyboard), when i type buttons it again change and show me value with buttonsm sorry for broken english, i hope you understand what i meant

Fetrarij Over a year ago

look at this plnkr and tell me what do you want from there plnkr.co/edit/Ab1XEIRHcDOk1WJbWKMJ?p=preview

shoopik Over a year ago

ok, try to type in input with keyboard something like "123" and type some button ( for example 567) and you will see 567 in the input field, i want that dont divide into two differents field, hope you got my thought ))

Fetrarij Over a year ago

plnkr.co/edit/1iS3vpl8UQ0XLBNnM6ky?p=preview I added ng-change, I too removed $scope.formula and changed it to var formula

Collectives™ on Stack Overflow

angularjs input fill issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related