Angular Js Expression not working

Question

I am new AngularJS. It's really fun, but I am facing some problem with this expression. This is my code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <style>
          p{
              height: 600px;
              width: 600px;
              font-size:17px;  
          }
      </style>
    </head>
    <body>
           <div ng-app="myApp" ng-controller="editor">
            <label for="kys_font_size"> font size:</label>
            <select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="changeFont()">
               </select>   
                <p contenteditable="true"  id="content"  ng-change="print()" >
                </p>
               <input type="text"  ng-model="name1">
                 <p >{{name1}}</p>
          </div>
         <p></p>
         <script>
           var app = angular.module('myApp',[]);
             app.controller('editor',function($scope){
               $scope.name1="jpos"
                $scope.kys_selected_font = "hi there";
                 $scope.fonttext="hello";
                 $scope.FontSize = function(start, end) {
                                      var size = [];
                                       for (var i = start; i <= end; i++) {
                                       size.push(i);
                                       }
                            return size;
                      };
                 $scope.print= function(){
                 };

                           $scope.changeFont = function(){
                               $("#content").append("<b size='3'  '> This is some text </b>");

                              $("#one").focus();
                           };
             });
         </script>
    </body>
</html>

This gives me an {{Name1}} as output. Can someone please tell me where I have gone wrong with this code?

@Jois You are mistaken. It has nothing to do with the ng-model="name1" but the lack of ngModel on the element with the ngChange directive. It says in the docs that ngChange also needs ngModel present on the same element. So in this case i believe that is a p element. — ste2425
– ste2425, Commented Apr 6, 2016 at 14:38

Hadi · Accepted Answer · 2016-04-06 15:03:34Z

3

you should define app and controller .

Update answer:

var app = angular.module('myApp',[]);
 app.controller('editor',function($scope){
 $scope.name1="jpos"
  $scope.kys_selected_font = "hi there";
  $scope.fonttext="hello";
  
   $scope.FontSize = function(start, end) {
    var size = [];
      for (var i = start; i <= end; i++) {
          size.push(i);
        }
      return size;
     };
                
    $scope.changeFont = function(size){
      $scope.newFont = {'font-size':size+'px'};
     };
   });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="editor">
            <label for="kys_font_size"> font size:</label>
            <select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="changeFont(kys_selected_font)">
               </select>   
               <input type="text"  ng-model="name1">
                 <p ng-style="newFont">{{name1}}</p>
          </div>

edited Apr 6, 2016 at 15:03

answered Apr 6, 2016 at 14:26

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

4 Comments

ste2425 Over a year ago

It will throw an exception without the controller definition too.

Sumanth Jois Over a year ago

ThakYou it worked, I have edited my code and i get same error with name1 can u please tell me what i have done wrong now?

Hadi Over a year ago

@ ste2425 if not use ng-controller in view so its work correctly. please test it.

ste2425 Over a year ago

@SSH Yup your right, but your example does use ngController and for someone learning angular missing that info out could really confuse them.

Chrillewoodz · Accepted Answer · 2016-04-06 14:26:35Z

1

You need to define an app module and a controller:

angular.module('JsApp', [])
  .controller('testing', ['$scope', function($scope) {

    // This will change when you write in the input
    $scope.YourName = 'John Doe';
  }]);

And it should work.

answered Apr 6, 2016 at 14:26

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

Collectives™ on Stack Overflow

Angular Js Expression not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related