Question

期望的结果是当用户将数据输入到输入字段时，它将动态显示下面的用户名。例如。当用户名Sally在输入字段中输入她的名字时，在下面它会立即显示她的名字。有什么想法吗？谢谢

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果您想使用this和ng-cpntroller as，则应始终在模板中使用tim 只需这样就可以了：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以试试这个：

   <!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>

Answer 3

如果您想坚持使用Controller as语法，可以像这样使用它：

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

请注意name和test是控制器的属性，因此您必须通过ng-model指令将它们绑定。

如果name和test是$scope对象的属性，则

您的原始语法是正确的。

当用户在输入字段中输入数据时，无法动态显示数据

3 个答案: