iT邦幫忙

DAY 8
9

入門AngularJS筆記與前端領域的學習筆記分享系列 第 8

Day8- 入門AngularJS筆記-AngularJS指令(7): input

介紹HTML input事件如何在angularJS中使用。

HTML checkbox,在angularJS官方文件的Demo:

http://jsbin.com/egavik/1/edit
由於此部分主要是根據HTML5的input types去做設定,

對於部分版本較舊的瀏覽器,會有無法支援的問題。

但預計2014年,HTML5將成為網頁撰寫標準語言,

所以還是值得好好來期待一下! 喜歡

input事件有以下屬性:

name 名稱
ng-model 綁定的資料
required 限制是否必填
ng-required 限制是否必填
ng-minlength 限制最小長度
ng-maxlength 限制最大長度
ng-pattern 限制RegExp格式
ng-change 當input的值發生變化的時候執行

除此之外,input還包含了以下類型

type="checkbox"
type="email"
type="number"
type="radio"
type="text"
type="url"

其中checkbox怎麼用?

  1. ng-controller,處理Model和View的雙向連結
  2. ng-model,綁定checkbox的資料和value1的值,一有變動,就會隨時更新。
  3. 可以透過ng-true-value和ng-false-value,修改value2的內容。

Html:

<form name="myForm" ng-controller="Ctrl">
    Value1: <input type="checkbox" ng-model="value1"> <br/>
    Value2: <input type="checkbox" ng-model="value2"
                   ng-true-value="YES" ng-false-value="NO"> <br/>
    <tt>value1 = {{value1}}</tt><br/>
    <tt>value2 = {{value2}}</tt><br/>
 </form>

Js:

function Ctrl($scope) {
  $scope.value1 = true;
  $scope.value2 = 'YES';
}

Demo:

http://jsbin.com/egavik/1/edit

radio的官方文件:

http://docs.angularjs.org/api/ng.directive:input.radio

radio的官方Demo:

http://jsfiddle.net/api/post/library/pure/

---------------入門AngularJS筆記---------------

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196


上一篇
Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
下一篇
Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
系列文
入門AngularJS筆記與前端領域的學習筆記分享30

2 則留言

0
yunhann
iT邦新手 5 級 ‧ 2014-07-28 15:27:49

iamya提到:
radio的官方Demo

的連結好像是空白的

0
holyzack1123
iT邦新手 5 級 ‧ 2017-04-15 23:56:15

實際測試範例檔
當我的版本是用1.5.7
程式碼ng-true-value="YES" ng-false-value="NO"> 是錯的跑不出來,瀏覽器報錯
看了最新的官方文件
要加上''
所以改為
ng-true-value="'YES'" ng-false-value="'NO'">

我要留言

立即登入留言