AngualrJS(四)input元素的ng-model屬性

轉載出處:http://www.cnblogs.com/liulangmao/p/3713758.html

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值),它們綁定的變量也會被改變

發佈了0 篇原創文章 · 獲贊 1 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章