输入控件中的Angularjs ngModel指令

时间:2014-09-05 15:29:21

标签: angularjs angularjs-directive

我是angularjs的新手,除了使用angularjs进行项目之外,我也在学习它。我所拥有的查询与以下代码相关: -

<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指令绑定输入,选择和textarea属性,并且在{{expression}}观察指令中检测到任何控件中的更改。但是在这里我没有在输入控件中看到任何{{expression}}观察指令。那么,如何更新输入控件中的值。

有人可以对此有所了解吗?

1 个答案:

答案 0 :(得分:0)

我尝试了你的代码,它适用于plunker。每个字符我都会更新“Hello ...”: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>