angularjs - 具有名称属性的AngularJS单选按钮组未正确初始化
问题描述
ng-repeat
如果我们为组指定属性,单选按钮组似乎不会初始化块内的name
属性。它似乎适用于最后一组广播组,但不适用于其他组。此外,如果我删除该name
属性,它也可以正常工作。根据 [AngularJS 文档][1],name
如果我们将其与ngModel
. 但这并不是说我们不能使用它。我需要指定一个name
属性。
请参考以下示例:
var m = angular.module("MyApp", []);
m.controller("MyController", ["$scope", function($scope) {
$scope.myArr = [{
name: "Obj 1",
status: "a"
}, {
name: "Obj 2",
status: "b"
}, {
name: "Obj 3",
status: "c"
}];
}]);
body {
background-color: #1D1F20;
}
.row {
margin-bottom: 15px;
}
.demo {
background: green;
color: white;
padding: 10px;
border-radius: 3px;
min-width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController" class="demo">
<div ng-repeat="eachItem in myArr" class="row">
<span>{{eachItem.name}} => </span>
<label> a
<input name="status-$index" type="radio" ng-model="eachItem.status" value="a">
</label>
<label> b
<input name="status-$index" type="radio" ng-model="eachItem.status" value="b">
</label>
<label> c
<input name="status-$index" type="radio" ng-model="eachItem.status" value="c">
</label>
</div>
</div>
解决方案
您的代码看起来很好,除了您将 name 属性设置为输入的地方。
$index
仅当您将其括在大括号内时,才会评估 in template。EX:{{$index}}
否则你会得到 $index 的名字。你应该使用:
<div ng-repeat="eachItem in myArr track by $index" class="row">
<input name="status-{{$index}}" type="radio" ng-model="eachItem.status" value="a">...
</div>
推荐阅读
- swift - 显示键盘时关闭“弹出”模式
- ssis - 如何使用 SSIS 变量值或项目参数值作为表达式主体,然后将其评估为另一个变量
- linux - 在小狗 linux 上配置 fox-toolkit 失败
- php - 带关联账户的 Stripe PaymentIntents + 收费
- c# - C# 中事件和更改标记之间的区别
- excel - 在将范围复制到 Visio 工作表之前在 Excel VBA 中对范围进行排序(错误 1004)
- django - 关于自定义用户模型的 Django 最佳实践
- amazon-web-services - AWS amplify 和 Dynamodb 的安全问题
- angular - 错误:formGroup 需要一个 FormGroup 实例。(角度 12)
- spring - 如何使用“Mono”处理程序确认所有成功的消息?