當用戶在輸入字段中輸入數據時無法動態顯示數據

希望的結果是當用戶輸入數據到輸入字段時，它會動態顯示下面的用戶名。例如。當用戶名Sally在輸入字段中輸入她的名字時，在下面它會立即顯示她的名字。任何想法？謝謝當用戶在輸入字段中輸入數據時無法動態顯示數據

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>

來源

2017-09-20 epiphany

如果你想堅持的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對象的屬性。

來源

2017-09-20 03:34:08

如果你想使用this和ng-cpntroller as你應該總是在模板使用tim只是這將是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>

來源

2017-09-20 03:29:35 JiangangXiong

最初我使用的$範圍語法，它的工作原理，但當我試圖轉換爲一個新的「控制器爲」語法，它失敗 – epiphany

好吧，我修改爲'ng控制器爲'，它將工作。 – JiangangXiong

你可以試試這個：

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

來源

2017-09-20 03:30:52

最初我使用$ scope語法並且它工作，但是當我試圖轉換爲一個更新的「Controller As」語法時，它現在失敗了 – epiphany

現在您可以嘗試此操作。 –

肯定這會起作用 –

當用戶在輸入字段中輸入數據時無法動態顯示數據

回答

相關問題