3778人阅读
前端（14）
AngularJS ng-repeat下使用ng-model
blue:&input type=&radio& value=&1& ng-model=&selectValue&/&
red:&input type=&radio& value=&2& ng-model=&selectValue&/&
yellow: &input type=&radio& value=&3& ng-model=&selectValue&/&
以上代码实现一个单选框功能，当你选中其中的一个单选框，可以从$scope.selectValue中得到你选中的的选项的value。
同时改变$scope.selectValue的值，也可以让界面上选中相应的单选框。
假设单选框的个数是不固定的，用ng-repeat来展现。
&tr ng-repeat=&row in collections&&
{{row.name}}: &input type=&radio& value=&{{row.value}}& ng-model=&selectValue&/&
当你书写了上述代码后。你会发现点击其中的对话框，$scope.selectValue中并没有保存你选中的对应单选框的值。
这是因为处在ng-repeat之间的代码，对全局的$scope里变量的内容是不可见的，像{{row.name}}里的row，并不是全局$scope里的成员。
而是为ng-repeat创建的子scope里面的。所以要引用全局$scope里的成员，你可以使用$parent 来引用全局的$scope
&tr ng-repeat=&row in collections&&
{{row.name}}: &input type=&radio& value=&{{row.value}}& ng-model=&$parent.selectValue&/&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：42258次
排名：千里之外
原创：23篇
转载：121篇
(1)(1)(1)(7)(15)(83)(36)今天在项目用需要使用&input&标签的type=radio 的双向绑定功能，一开始ng-model绑定的变量在controller里一直无法实现绑定功能；源码如下：
在html里的代码：
&label for=&group1&&&input type=&radio& id=&group1& class=&group&
name=&group& value=&1& ng-model=&choice& &&span&公开&/span&&/label&&br&
&label for=&group2&&&input type=&radio& id=&group2& class=&group& name=&group& value=&2& ng-model=&choice& &&span&好友可见&/span&&/label&
controller里代码：
// 初始化单选框的值
$scope.choice = 1;
// 点击事件，获取被选中的单选框的value值
$scope.send = function(){
console.log($scope.authority.choice);
// 一直为初始化的值：1
不管我怎么获取，都获取不到单选框的值，后台发现原来是我绑定值的时候出了问题：
&label for=&group1&&&input type=&radio& id=&group1& class=&group&
name=&group& value=&1& ng-model=&authority.choice& &&span&公开&/span&&/label&&br&
&label for=&group2&&&input type=&radio& id=&group2& class=&group& name=&group& value=&2& ng-model=&authority.choice& &&span&好友可见&/span&&/label&
controller：
// 初始化单选框的值，并放到一个对象里面
$scope.authority= {&choice& :1};
// 点击事件，获取被选中的单选框的value值
$scope.send = function(){
console.log($scope.authority.choice);
// 一直为初始化的值：1
** ng-model = 对象属性
&&& $scope.authority = {&choice&:1}& 必须以对象形式初始化值；
希望对大家能有帮助，不要像我一样在这个坑里花费这么长时间。。。
本文已收录于以下专栏：
相关文章推荐
1、实例背景      ionic单选框用的是radio，设置样式item-radio2、实例源码
ionic之单选框
1.引入angular.min.js2.创建angularJs module
：var m = angular.module('module', []);3.引入module：ng-app=&mod...
Linux老难题解决了！
Linux工程师很多，甚至有很多有多年工作经验，但是对一些关键概念的理解非常模糊，比如不理解CPU、内存资源等的真正分布，具体的工作机制，这使得他们对很多问题的分析都摸不到方向。比如进程的调度延时是多少？linux能否硬实时？多核下多线程如何执行？
1、什么是双向数据绑定双向数据绑定：
Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。即数据模型（Module）和视图（View）...
自己最近再看AngularJS,但想了解一下内部原理，于是找到了这篇非常好的文章。
好文章就要分享给大家！不谢。。。
AngularJS数据双向绑定揭秘
闲话少说直接贴代码
html页面代码
ion-header-bar class=&bar-positive&&
h1 class=&title&&当选按钮h1&
ion-header-b...
在AngularJS中提及双向数据绑定，大家肯定会想到ng-model指令。通过 value 属性指定选中状态下对应的值，并通过 ng-model 将单选框与 $scope 中的属性对应，实现双向绑定...
今天在项目用需要使用标签的type=radio 的双向绑定功能，一开始ng-model绑定的变量在controller里一直无法实现绑定功能；源码如下：
在html里的代码：
ng-model=&c...
1.请描述一下cookies，sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页...
他的最新文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)AngularJS 教程
AngularJS 表单
AngularJS 表单是输入控件的集合。
以下 HTML input 元素被称为 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
Input 控件使用 ng-model 指令来实现数据绑定。
&input type=&text& ng-model=&firstname&&
通过以上代码应用有了一个名为 firstname 的属性。
它通过 ng-model 指令来绑定到你的应用。
firstname 属性可以在 controller 中使用：
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = &John&;
也可以在应用的其他地方使用:
First Name: &input type=&text& ng-model=&firstname&&
&h1&You entered: {{firstname}}&/h1&
Checkbox（复选框）
checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中：
复选框选中后显示 h1 标签内容：
Check to show a header:
&input type=&checkbox& ng-model=&myVar&&
&h1 ng-show=&myVar&&My Header&/h1&
我们可以使用 ng-model 来绑定单选按钮到你的应用中。
单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
根据选中的单选按钮，显示信息：
选择一个选项:
&input type=&radio& ng-model=&myVar& value=&dogs&&Dogs
&input type=&radio& ng-model=&myVar& value=&tuts&&Tutorials
&input type=&radio& ng-model=&myVar& value=&cars&&Cars
myVar 的值可以是 dogs, tuts, 或 cars。
使用 ng-model 指令可以将下拉菜单绑定到你的应用中。
ng-model 属性的值为你在下拉菜单选中的选项：
根据选中的下拉菜单选项，显示信息：
选择一个选项:
&select ng-model=&myVar&&
&option value=&&&
&option value=&dogs&&Dogs
&option value=&tuts&&Tutorials
&option value=&cars&&Cars
myVar 的值可以是 dogs, tuts, 或 cars。
HTML 表单通常与 HTML 控件同时存在。
AngularJS 表单实例
First Name:
Last Name:
form = {{user}}
master = {{master}}
应用程序代码
&div ng-app=&myApp& ng-controller=&formCtrl&&
&form novalidate&
First Name:&br&
&input type=&text& ng-model=&user.firstName&&&br&
Last Name:&br&
&input type=&text& ng-model=&user.lastName&&
&button ng-click=&reset()&&RESET&/button&
&p&form = {{user}}&/p&
&p&master = {{master}}&/p&
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: &John&, lastName: &Doe&};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
$scope.reset();
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的
user 对象。
formCtrl 函数设置了
master 对象的初始值，并定义了 reset() 方法。
reset() 方法设置了 user
对象等于 master 对象。
ng-click 指令调用了 reset()
方法，且在点击按钮时调用。
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。
记住登录状态
重复输入密码