Fail to dynamically show data when user input data in the input field

Question

Desired result is when user input data into the input field, it will dynamically display user's name below. eg. When a user name Sally input her name in the input field, in the below it will instantly show her name. Any idea?Thanks

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


app.controller('PersonCtrl', function(){
//...
this.name ='tom';
this.test ='mary';
});

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

<head>

  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
</head>

<body>
  <div class="well span6" ng-controller="PersonCtrl as tim">

    <label>Name1:</label>
    <input type="text" ng-model="name">
    <hr>
    
    <label>Name2:</label>

    <input type="text" ng-model="test">
    <br>Name1: {{tim.name }}<br>
    Name2: {{tim.test }}

  </div>

  </body>
  </html>

Jorge Valle · Accepted Answer · 2017-09-20 03:54:27Z

If you want to stick with the Controller as syntax, you can use it like this:

<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
  </head>

  <body>
    <div class="well span6" ng-controller="PersonCtrl as ctrl">

      <label>Name1:</label>
      <input type="text" ng-model="ctrl.name">
      <hr>

      <label>Name2:</label>
      <input type="text" ng-model="ctrl.test"><br>
      Name1: {{ctrl.name}}<br>
      Name2: {{ctrl.test}}

    </div>

    <script>
    var app = angular.module('app', []);
    app.controller('PersonCtrl', function() {
      //...
      this.name ='tom';
      this.test ='mary';
    });
    </script>

  </body>

</html>

Notice that name and test are properties of the controller, so you have to bind them as such through the ng-model directive.

Your original syntax would've been correct if name and test were properties of the $scope object.

JiangangXiong · Accepted Answer · 2017-09-20 03:38:20Z

1

If you want to use this and ng-cpntroller as you should always use your tim in the template Just this will be OK,:

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


app.controller('PersonCtrl', function(){
//...
this.name ='tom';
this.test ='mary';
});

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

<head>

  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
</head>

<body>
  <div class="well span6" ng-controller="PersonCtrl as tim">

    <label>Name1:</label>
    <input type="text" ng-model="tim.name">
    <hr>
    
    <label>Name2:</label>

    <input type="text" ng-model="tim.test">
    <br>Name1: {{tim.name }}<br>
    Name2: {{tim.test }}

  </div>

  </body>
  </html>

edited Sep 20, 2017 at 3:38

answered Sep 20, 2017 at 3:29

JiangangXiong

2,4461 gold badge14 silver badges15 bronze badges

2 Comments

epiphany Over a year ago

Originally i was using the $scope syntax and it work, but when i tried to convert to a newer "Controller As" syntax , it fails

JiangangXiong Over a year ago

Ok, I modify to ng-controller-as, it will be work.

Kunvar Singh · Accepted Answer · 2017-09-20 03:39:28Z

1

You may try for this:

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

<div ng-app="myApp" ng-controller="myCtrl as vm">

First Name: <input type="text" ng-model="vm.firstName"><br>
Last Name: <input type="text" ng-model="vm.lastName"><br>
<br>
Full Name: {{vm.firstName + " " + vm.lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    this.firstName = "John";
    this.lastName = "Doe";
});
</script>

</body>
</html>

edited Sep 20, 2017 at 3:39

answered Sep 20, 2017 at 3:30

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

1 Comment

epiphany Over a year ago

Originally i was using the $scope syntax and it work, but when i tried to convert to a newer "Controller As" syntax , it fails

Collectives™ on Stack Overflow

Fail to dynamically show data when user input data in the input field

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related