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对象,而不是简单数据类型。

  • 相关阅读:
    C++ 并发编程 01 线程api
    C# CS1591 缺少对公共可见类型或成员的 XML 注释 问题解决
    Web Api HelpPage
    C++11新特性介绍 02
    C++11新特性介绍 01
    Autofac框架详解
    Linux gdb调试器用法全面解析
    BCM_SDK命令
    VLAN
    java_Observer Design Pattern
  • 原文地址:https://www.cnblogs.com/51kata/p/6044999.html
Copyright © 2011-2022 走看看