我正在尝试使用角度数组绘制radioBoxes,然后获取已检查无线电的值,但模型不会改变它的值,有人可以帮助我吗?
HTML部分
<div ng-app>
<div ng-controller="CustomCtrl">
<label ng-repeat="user in users">
<input type="radio" name="radio" ng-model="radio" value="{{user.name}}" /> {{user.name}}
</label>
<br/>
{{radio}}
<br/>
<a href="javascript:void(0)" ng-click="saveTemplate()">Save</a>
</div>
</div>
角度部分
function CustomCtrl($scope) {
$scope.radio = "John";
$scope.users = [
{"name" : "John", "Year" : 18},
{"name" : "Tony", "Year" : 19}
];
$scope.saveTemplate = function() {
console.log($scope.radio);
};
}
您可以在此处查看示例 - http://jsfiddle.net/hgf37bo0/2/
答案 0 :(得分:7)
您需要将$scope.radio
设置为这样的对象:
$scope.radio = {
name: 'John'
}
然后从html访问它,如:
<input type="radio" name="radio" ng-model="radio.name" value="{{user.name}}" />
这是一个有效的jsfiddle
您可以在此answer
中了解这有必要的原因 来自angularjs docs的:
范围继承通常很简单,你甚至不需要知道它正在发生......直到你尝试双向数据绑定(即表单元素,ng-model)到一个原语(例如,数字) ,string,boolean)在子范围内从父范围定义。它不像大多数人期望的那样工作。会发生什么是子范围获取其自己的属性,该属性隐藏/隐藏同名的父属性。这不是AngularJS正在做的事情 - 这就是JavaScript原型继承的工作方式。
...
拥有'。'在你的模型中将确保原型继承发挥作用。所以,使用
<input type="text" ng-model="someObj.prop1">
而不是
<input type="text" ng-model="prop1">
如果您确实需要/需要使用原语,则有两种解决方法:
在子范围中使用$ parent.parentScopeProperty。这会阻止 子范围来自创建自己的属性。定义一个函数 父范围,并从子系统调用它,传递原语 价值高于父母(并非总是可能)