2013年12月19日 星期四

AngularJS 的 ng-model 跟 ng-click

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

html
  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
  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
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...