Twitter Bootstrap Question posted in

Fail to dynamically show data when user input data in the input field-Twitter bootstrap

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>
Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search