CODEWITHSUNDEEP
javascriptangularjs
Sora
Sora

Reputation: 2551

Combining two angularjs expression not working correctly

I am trying to combine two angularjs expression 

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

  2.  <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 : enter code here

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

Upvotes: 0

Views: 235

Answers (4)

Erazihel
Erazihel

Reputation: 7615

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

Upvotes: 1

Shekhar Khairnar
Shekhar Khairnar

Reputation: 2691

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>

Upvotes: 0

Salman Ullah Khan
Salman Ullah Khan

Reputation: 728

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-

Upvotes: 0

mohamedrias
mohamedrias

Reputation: 18576

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>

Upvotes: 1

Related Questions