脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS单选框及多选框实现双向动态绑定

AngularJS单选框及多选框实现双向动态绑定

 更新时间：2016年01月13日 16:11:07   作者：奋飛  
这篇文章主要为大家详细介绍了AngularJS单选框及多选框实现双向动态绑定的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在AngularJS中提及双向数据绑定，大家肯定会想到ng-model指令。

一、ng-model

ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性不存在，它会隐式创建并将其添加到当前作用域中。
始终用ng-model来绑定scope上一个数据模型内的属性，而不是scope上的属性，这可以避免在作用域或后代作用域中发生属性覆盖！

<input type="text" ng-model="modelName.somePrototype" />

二、type=”radio”

通过 value 属性指定选中状态下对应的值，并通过 ng-model 将单选框与 $scope 中的属性对应，便实现了 type=”radio” 时的双向动态绑定。

<input type="radio" name="sex" value="male" ng-model="person.sex" />男
<input type="radio" name="sex" value="female" ng-model="person.sex" />女

三、type=”checkbox”

通过AngularJS 的内置指令 ng-true-value 和 ng-false-value ，指定多选框在选中和未选中状态下对应的值，再通过ng-model 将其与 $scope 中的属性对应，便实现了type=”checkbox” 的双向动态绑定。

<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球

四、完整示例

<html ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>radio & checkbox</title>
 <script type="text/javascript" src="angular.js/1.4.4/angular.min.js"></script>
</head>
<body>
 <input type="radio" name="sex" value="male" ng-model="person.sex" />男
 <input type="radio" name="sex" value="female" ng-model="person.sex" />女
 <input type="text" ng-model="person.sex" />

 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
 <span>{{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} </span>
</body>
</html>

<script type="text/javascript">
 var app = angular.module('myApp', []);
 app.run(function($rootScope) {
  $rootScope.person = {
   sex: "female",
   like: {
    pingpong: true,
    football: true,
    basketball: false
   }
  };
 });
</script>

以上就是关于AngularJS单选框及多选框实现双向动态绑定的相关介绍，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • 在Angular中使用Renderer2的操作代码

    在Angular中使用Renderer2的操作代码

    Renderer2 类是 Angular 提供的一个抽象服务,允许在不直接操作 DOM 的情况下操纵应用程序的元素,本文给大家介绍了如何在 Angular 中使用 Renderer2,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • Angular应用tsconfig.json中的lib属性示例解析

    Angular应用tsconfig.json中的lib属性示例解析

    这篇文章主要介绍了Angular应用tsconfig.json中的lib属性示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • AngularJS中关于ng-class指令的几种实现方式详解

    AngularJS中关于ng-class指令的几种实现方式详解

    这篇文章给大家介绍了angularJS中ng-class指令的三种实现方式，其中包括通过数据的双向绑定、通过对象数组和通过key/value这三种方式，有需要的朋友们可以参考学习，下面来一起看看吧。
    2016-09-09
  • AngularJS模仿Form表单提交的实现代码

    AngularJS模仿Form表单提交的实现代码

    本文通过一段实例代码给大家简单介绍了angularjs模仿form表单提交的方法，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-12-12
  • AngularJS 中的Promise --- $q服务详解

    AngularJS 中的Promise --- $q服务详解

    这篇文章主要介绍了AngularJS 中的Promise --- $q服务详解方法的相关资料,需要的朋友可以参考下
    2016-09-09
  • AngularJS教程之MVC体系结构详解

    AngularJS教程之MVC体系结构详解

    本文主要讲解AngularJS MVC体系结构，这里提供详细的教程供大家学习参考，有需要的小伙伴可以参考下
    2016-08-08
  • AngularJS 实现点击按钮获取验证码功能实例代码

    AngularJS 实现点击按钮获取验证码功能实例代码

    本文通过实例代码给大家介绍了AngularJS 实现点击按钮获取验证码功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-07-07
  • 使用yeoman构建angular应用的方法

    使用yeoman构建angular应用的方法

    下面小编就为大家带来一篇使用yeoman构建angular应用的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Angular中ng-template和ng-container的应用小结

    Angular中ng-template和ng-container的应用小结

    Angular的日常工作中经常会使用到ng-template和ng-container，本文对他们做一个总结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2022-06-06
  • AngularJS实现Input格式化的方法

    AngularJS实现Input格式化的方法

    这篇文章主要介绍了AngularJS实现Input格式化的方法,结合实例形式分析了AngularJS实现Input格式化的操作步骤与相关注意事项,需要的朋友可以参考下
    2016-11-11

最新评论