[AngularJS] ng-model

[AngularJS] ng-model

ng-model 命令

  范例  

原始html

    


    姓名:
    
    
    
我的名字是 

原始画面

上面的范例，希望可以在框框里输入名字后，显示出名字在下方，步骤如下:

 

1 在head引用angular.js，并且在html标签里面加入ng-app的属性，加入ng-app属性的标签就是处理的范围，所以这个范例里整个页面都可以使用AngularJS。

    
    


    姓名:
    
    
    
我的名字是 

 

2 input标签里加入ng-model="name"，这样就是一个name的变量。 接着在h3里面加入Angular 表达式，语法为 {{ 变量 }}，因此这里加入{{name}}，要是想要在下方文字默认文字的话，可以把Angular 表达式改写为{{name || "请输入上方字段"}}。

    
    


    姓名:
    
    
    
我的名字是 {{name || "上方字段"}}

 

3 预览画面，在框框输入名字，就可以看到数据绑定的效果了!

输入名字前

输入名字后

 END 

回目录 

原文:大专栏  [AngularJS] ng-model