2013年7月19日 星期五

AngularJS 練習 ngBind

step1.

進入  http://plnkr.co/edit/?p=preview

step2.

左邊選擇index.html

將以下的code全部覆蓋

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body>

<div ng-controller="Ctrl">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
</div>


  </body>
</html>


step3.

左邊選擇script.js

貼上以下的code

function Ctrl($scope) {
  $scope.name = 'Whirled';
}

step4. 觀看結果


在上面有一個button run的請您按下會看到以下的結果

Enter name: 
Hello Whirled!


請您再輸入的框框中 輸入值 會直接Bind 顯示到<span ng-bind="name"></span>

讓您寫起程式更加方便清楚明白



0 意見:

張貼留言