angular學習筆記(四)- input元素的ng-model屬性

詩&遠方發表於2014-05-07
Angular筆記

input元素的ng-model屬性:

用於將input的值和變數的值進行雙向繫結

<!DOCTYPE html>
<html ng-app>
<head>
  <title>2.3.1input資料繫結</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller = 'CheckStatus'>
    <form action="">
      <input type="checkbox" ng-model="checkRabbit"/>rabbit:<span>{{checkRabbit}}</span>
      <br>
      <input type="checkbox" ng-model="checkDog"/>dog:<span>{{checkDog}}</span>
      <br>
      <input type="checkbox" ng-model="checkCat"/>cat:<span>{{checkCat}}</span>
    </form>
  </div>
</body>
</html>

如果是text型別的input,繫結的就是它的value,如果是checkbox,繫結的就是選中狀態的true或者false,

對input的繫結是雙向的,即變數的變化,也會引起選中與否的變化(或者是value的變化),比如這裡設定的checkRabbit值是true,那麼它就是選中的,其餘兩個值設定的是false,他們就是不選中的,

同樣,改變input的選中狀態(或者是value值),它們繫結的變數也會被改變

相關文章