AngularJS 的 ng-model 跟 ng-click

再一次看 Angular 觀念就更清楚了。

html

view plaincopy to clipboardprint

1. <div ng-app>  
2.     <div ng-controller="nameCrtl">  
3.         <p>hi, {{yourName || 'Jordan'}}!</p>     
4.         <input placeholder="input a name." type="text" ng-model="yourName">  
5.         <p>My name is {{name}}</p>  
6.             <button ng-click="replaceName()">重置</button>  
7.             <button ng-click="sayHello()">問好</button>  
8.     </div>  
9. </div>  

javascript

view plaincopy to clipboardprint

1. function nameCrtl($scope) {   
2.        
3.   $scope.name = "Jason";   
4.        
5.   $scope.replaceName= function(){   
6.      $scope.yourName="Jordan";      
7.   }   
8.   $scope.sayHello= function(){   
9.      alert("hi, "+$scope.yourName);      
10.   }   
11. }  

基本中的基本的範例，用 ng-model 去控制變數，也可以從 controller 裡給變數。用 ng-click 控制按下動作，按了重置後變回預設值，按了問好按鈕會跳出輸入的名稱加問好。

Demo