Curly braces not showing value in angular

Question

Curly braces not showing value in angular

2.4k views Asked by HyperVol At 11 September 2024 at 14:37

Following Code is not showing or updating the value of nam in <p> tag. Kindly help !

<html ng-app>
<head></head>
<body>
<input ng-model = "nam.a" ng-controller = "myControl">
<p> Hello {{nam.a}}  </p>
<script>
function myControl($scope){
$scope.nam =  {
    a : "abcdefg"
};
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</body>
</html>

Original Q&A

There are 4 answers

Sharmila On 30 December 2016 at 06:51

you should write like this

        <body ng-controller="myControl">
            <input ng-model = "nam.a">
            <p> Hello {{nam.a}}  </p>
         </body>

https://plnkr.co/edit/M5n5Zb3v3J9W9Mx65cub?p=preview

Balaji Marimuthu On 30 December 2016 at 06:55

You should specify the app module in html page.

 <html ng-app="Test">

<body  ng-controller = "myControl">
<input ng-model = "nam.a"/>
<p> Hello {{nam.a}}  </p>

Then inject the module and controller like as below.

var app = angular.module('Test', []);
app.controller('myControl', function($scope) {
      $scope.nam =  {
    a : "abcdefg"
};
});

therobinkim On 30 December 2016 at 06:56

<html>
<body ng-app="yourAppName">
  
  <div  ng-controller="myControl">
    <input ng-model="nam.a">
    <p> Hello {{nam.a}}  </p>
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>

  <script>
    angular.module('yourAppName', [])
      .controller('myControl', function($scope) {
        $scope.nam = {
          a: 'abcdefg'
        }
      });
  </script>
</body>
</html>

use angular to create a module (in the example, I called it yourAppName), which you reference in the HTML in the ng-app directive
move the ng-controller directive to a parent element for wherever you reference things on $scope
create a controller by using angular.module(...).controller() instead of just creating a random JavaScript function

**Nitheesh** · Accepted Answer · 2016-12-30 06:57:38

In your code there is no ng-app created, ng-controller is binded in wrong way also. This is the right implementation. Look at the example.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myControl">

        <input ng-model="nam.a" >
        <p> Hello {{nam.a}} </p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myControl', function ($scope) {
            $scope.nam = {
                a: "abcdefg"
            };
        });
    </script>

</body>

</html>

TechQA.

Curly braces not showing value in angular

There are 4 answers

Related Questions in ANGULARJS

Related Questions in CURLY-BRACES

Related Questions in NG-CONTROLLER

Popular Questions

Popular Tags

Trending Questions