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

前端之家收集整理的这篇文章主要介绍了AngularJS单选框及多选框实现双向动态绑定前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、ng-model

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

二、type=”radio

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

三、type=”checkBox

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

乒乓球 足球 篮球

四、完整示例

<Meta charset="UTF-8"> ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a> & check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>

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

原文链接:https://www.f2er.com/js/50578.html

猜你在找的JavaScript相关文章