ng-model绑定表单,所示表单值的类型

Angularjs 表单类型:

  • input 元素
  • select 元素
  • button 元素
  • textarea 元素

1.input时根据类型不同,ng-model绑定的值不同

    1.1 text ----ng-mode为输入框的值

    <input type="text" ng-model="thisval"> 

    <p>{{thisval}}</p>

    1.2 checkbox----ng-model为选中状态true/false

    <input type="checkbox" ng-model="mytype">

    <div ng-show={{mytpye}}>是就显示,否就隐藏</div>

 1.3  radio----ng-model为选中的input的value值

          <input type="radio"  ng-model="myradio" value="radio1">  A 

    <input type="radio"  ng-model="myradio" value="radio2">  B

    <input type="radio"  ng-model="myradio" value="radio3">  C

    <h1>{{myradio}}</h1> ----(显示radio1/radio2/radio3)

 

2.select时根据类型不同,ng-model绑定的值不同

  ng-model为选中的select的option的value值

    <select ng-model="myselect">

            <option   value="radio1">  A </option>

      <option   value="radio2">  B</option>

      <option   value="radio3">  C</option>

    </select>

    <h1>{{myselect}}</h1> ----(显示radio1/radio2/radio3)

 

 3.其余两种类类型

  • button 元素--------走ng-click调用函数
  • textarea 元素------和input的text类型一样
posted @ 2018-01-10 16:02  Yogic  阅读(258)  评论(0编辑  收藏  举报