zoukankan      html  css  js  c++  java
  • Angulajs 表单的ng-model绑定

    1、对于文本框,只需设置 ng-model 属性就可以实现双向绑定,如:

    <input type="text" class="form-control" ng-model="item">

    这样在js中就可以通过  $scope.item来实现双向绑定。

     说明:对于文本框,通过$scope.item 获取时,自动会除去空格,相当于在原始值基础上调用了trim()方法。

    这样我们在获取数据时,不需要在判断和去空格时。

    2、单选按钮组的绑定方式,如:

    <label>  <input type="radio" name="optionsRadios" value="single" ng-model="seltype" >单选题</label>
    <label>  <input type="radio" name="optionsRadios" value="muti" ng-model="seltype">多选题</label>

    在js中的代码:

    1)初始化设置被选中的按钮: $scope.seltype = "muti"  这样初始时第2个radio就会被选中

    2)获取被选中的按钮

    如果 $scope.seltype 的值为 single ,则是第1个radio被选中。

    如果 $scope.seltype 的值为 muti,则是第2个radio被选中。

    3、复选框checkbox的绑定方式

    <input type="checkbox"  ng-model="selok">选中

    在js中的代码

    1)初始化选中:$scope.selok = true;

    2)判断checkbox是否被选中:

    如果 $scope.selok 返回true,则被选中;否则没有被选中

    注意:这里的selok一定要是真的布尔值,不能是其它值。比如  $scope.selok= 12 或是其它非空数据,都无效。一定必须是true 这个值。

    需要说明的是,如果绑定的数据是一个简单数据(非js对象),而且设置在$rootScope中。

    当在html中用ng-model引用时,初始化没有问题,可以获得rootScope中的值,但是当表单数据发生变化时,实际是新设置了一个$scope中的数据,

    对当前的$rootScope没有影响。 如果需要对rootScope值可用,应该绑定成一个js对象,而不是简单数据类型。

  • 相关阅读:
    springboot文件上传: 单个文件上传 和 多个文件上传
    Eclipse:很不错的插件-devStyle,将你的eclipse变成idea风格
    springboot项目搭建:结构和入门程序
    POJ 3169 Layout 差分约束系统
    POJ 3723 Conscription 最小生成树
    POJ 3255 Roadblocks 次短路
    UVA 11367 Full Tank? 最短路
    UVA 10269 Adventure of Super Mario 最短路
    UVA 10603 Fill 最短路
    POJ 2431 Expedition 优先队列
  • 原文地址:https://www.cnblogs.com/51kata/p/6044999.html
Copyright © 2011-2022 走看看