2014-09-05 116 views
0

我是angularjs的新手,除了使用angularjs工作,我也在學習它。查詢我有,是相關於以下代碼: -輸入控件中的Angularjs ngModel指令

<html ng-app> 
    <head> 
    <meta charset="utf-8"> 
    <title>Angular.js Example</title> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> 
    </head> 
    <body> 
    Name:<input ng-model="name" type="text"/> 
    <br> 
    Name:<input ng-model="name" type="text"/> 
    <br> 
    Name:<input ng-model="name" type="text"/> 
    <br> 
    Hello {{name}} 
    </body> 
</html> 

在該代碼中,有ngModel指示與每一個輸入控制,並且當我在輸入中的任一種類型的控制另外兩個輸入的值控件也更新。我知道ngModel指令綁定了輸入,select和textarea屬性,並且在{{expression}}觀察指令中檢測到任何控件中的更改。但是在這裏我沒有在輸入控件中看到任何{{expression}}觀察指令。那麼,如何更新輸入控件中的值。

有人可以對此有所瞭解嗎?

+1

看到,http://ngtutorial.com/learn/scope – 2014-09-05 15:35:24

回答

0

我試過你的代碼,它在plunker中工作。在「你好......」得到每個字符的更新I型:http://plnkr.co/edit/U9IpmKNALfpAqNNhoTHa?p=preview

<html ng-app> 

<head> 
    <meta charset="utf-8"> 
    <title>Angular.js Example</title> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> 
</head> 

<body> 
    Name: 
    <input ng-model="name" type="text" /> 
    <br>Name: 
    <input ng-model="name" type="text" /> 
    <br>Name: 
    <input ng-model="name" type="text" /> 
    <br>Hello {{name}} 
</body> 

</html> 
+0

呀它的工作原理,但我想使這件事情清楚地表明瞭如何輸入控制值更改/更新,沒有任何{{表達式}}觀察指令 – Rohaan 2014-09-05 15:42:23

+0

ng-model是雙向綁定,這就是爲什麼它更新... {{}}是單向綁定,相當於ng-bind – alpinescrambler 2014-09-05 15:43:40

+0

你能請給出一個清除雙向綁定的精確示例代碼?此外,我在官方文檔中閱讀了這種雙向綁定,但代碼可以清除更多 – Rohaan 2014-09-05 15:46:43