Combining two angularjs expression not working correctly

Question

I am trying to combine two angularjs expression

 <div ng-app="">
    <p>Name :
    <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
 </div>

 <div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
 </div>

by doing this :

 <div ng-app="ctrl">
            <p>Enter first numb:<input type="text" ng-model="firstnb"/></p>
            <p>Enter sec numb:<input type="text" ng-model="secnb"/></p>
            <p>Enter operator:<input type="text" ng-model="op"/></p>
          <p>  Result is : {{firstnb}} &nbsp; {{op}} &nbsp; {{secnb}}  = </p>
        </div>

but before even calculating the result i am getting this on my browser :

I am a nooby in angular and i have no idea why i am getting the result note that : <script src="js/angular.min.js"></script> is loaded perfectly

<div ng-app="ctrl"> are you trying to apply controller or is it app name ? — Shekhar Khairnar
– Shekhar Khairnar, Commented Aug 19, 2015 at 6:56
the app name in the example i saw on w3school the ng-app=" " — Sora
– Sora, Commented Aug 19, 2015 at 6:57
are there any console errors? did you define the angular module "ctrl" correctly? — gafi
– gafi, Commented Aug 19, 2015 at 6:59

Erazihel · Accepted Answer · 2015-08-19 07:07:22Z

1

First of all, you have to declare an Angular app and link it to your HTML:

JS:

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

HTML:

<html ng-app="myApp">

Then, you have to add a controller to your Angular app and use it in your HTML:

JS:

app.controller('myCtrl', function() {
    // Your code here
});

HTML:

<div ng-app="myCtrl">
    <p>Enter first numb:<input type="text" ng-model="firstnb"/></p>
    <p>Enter sec numb:<input type="text" ng-model="secnb"/></p>
    <p>Enter operator:<input type="text" ng-model="op"/></p>
    <p>  Result is : {{firstnb}} &nbsp; {{op}} &nbsp; {{secnb}}  = </p>
</div>

See working JSFiddle

EDIT

I've modified my JSFiddle (see link above) to fit your needs. In the controller:

myApp.controller('MyCtrl', function($scope) {
    $scope.updateResult = function() {
        console.log($scope.op);
        switch($scope.op) {
            case '+':
                $scope.result = Number($scope.firstnb) + Number($scope.secnb)
                break;
        }
    };
});

I've only implemented the addition, but I'm sure you'll know how to handle the rest

edited Aug 19, 2015 at 7:07

answered Aug 19, 2015 at 6:57

Erazihel

7,6456 gold badges34 silver badges56 bronze badges

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

2 Comments

Sora Over a year ago

thank you for your answer i replace <div ng-app="myCtrl" > with '<div ng-app >' and it is working now , but how can i calculate the result ?

Sora Over a year ago

can i do this : {{ {{firstnb}} {{op}} {{secnb}} }} ?

mohamedrias · Accepted Answer · 2015-08-19 06:56:26Z

1

When you use ng-app="ctrl" you must also defien the module as well. Also i would suggest not to pollute rootScope, instead create a scope using controller.

angular.module("ctrl",[]);

DEMO

Else you can just use ng-app without module name. but It's recommended to use module name and define it using angular.module.

 <div ng-app>
            <p>Enter first numb:<input type="text" ng-model="firstnb"/></p>
            <p>Enter sec numb:<input type="text" ng-model="secnb"/></p>
            <p>Enter operator:<input type="text" ng-model="op"/></p>
          <p>  Result is : {{firstnb}} &nbsp; {{op}} &nbsp; {{secnb}}  = </p>
        </div>

answered Aug 19, 2015 at 6:56

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Comments

Salman Ullah Khan · Accepted Answer · 2015-08-19 06:58:26Z

0

Depending on which version of AngularJS you are using, this is expected.

Check this out may be this will help.

https://docs.angularjs.org/guide/migration#you-can-only-bind-one-expression-to-src-ng-src-or-action-

answered Aug 19, 2015 at 6:58

Salman Ullah Khan

71810 silver badges29 bronze badges

Comments

Shekhar Khairnar · Accepted Answer · 2015-08-19 07:01:30Z

0

check this one its working :--

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app>
    <p>Enter first numb:<input type="text" ng-model="firstnb"/></p>
    <p>Enter sec numb:<input type="text" ng-model="secnb"/></p>
    <p>Enter operator:<input type="text" ng-model="op"/></p>
    <p>  Result is : {{firstnb}} &nbsp; {{op}} &nbsp; {{secnb}}  = </p>
</div>

answered Aug 19, 2015 at 7:01

Shekhar Khairnar

2,7013 gold badges29 silver badges46 bronze badges

Collectives™ on Stack Overflow

Combining two angularjs expression not working correctly

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related