这里有Angular 1应用。
我有一个名为data.json的json文件:
[
{
"rejectionType": "REJECTION_1",
"user": "ALL",
"selected": false
},
{
"rejectionType": "REJECTION_2",
"user": "MALE",
"selected": false
},
{
"rejectionType": "REJECTION_3",
"user": "FEMALE",
"selected": false
}
]
在控制器中,我执行以下操作:
$http.get('data.json').then(function(response) {
var rejectionData = response.data;
myctrl.currentRejections = _.filter(rejectionData, function(item, index) {
return _.contains(["ALL", "MALE"], item.user);
})
console.log("myCtrl.currentRejections:",myCtrl.currentRejections);
$("#modRejectionReason").modal("show");
});
视图中的模态如下:
<div id="modRejectionReason">
<div class="modal-body">
<p>
<div ng-repeat="allrejections in myctrl.currentRejections">
<p>
<input type="radio" name="selected" ng-model="allrejections.selected" />
{{allrejections.rejectionType}}
</p>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" ng-click="myctrl.func()">OK</button>
</div>
</div>
</div>
</div>
然后在控制器中我有这个:
var declineInvite = function () {
console.log("myctrl.currentRejections:",myctrl.currentRejections);
}
在日志中,我看到模态出现时,将打印变量myCtrl.currentRejections
。它是一个包含所有已过滤元素的数组。
对于每个元素,我看到字段selected
为假。
然后我检查单选按钮,然后单击OK-button
时,将触发功能func
。
即使在此处,相同的数据也会打印在控制台中。但是,对于在json中单击的那些单选按钮,字段selected
的值未定义。
我在这里想念什么?
答案 0 :(得分:2)
您需要为单选按钮提供一个在选中时要设置的值。
<input type="radio" name="selected" ng-model="allrejections.selected" ng-value="true"/>
在当前代码中执行此操作的问题在于,selected:true
永远不会被取消设置,因此我建议在名为selectedRejection
的控制器上添加一个新值,并将其用作模型并设置实际拒绝对象的值。这样做意味着您也可以摆脱JSON数据上的选定属性!
var myApp = angular.module('myApp', []).controller("MyCtrl", MyCtrl);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl() {
var MyCtrl = this;
MyCtrl.currentRejections = [{
"rejectionType": "REJECTION_1",
"user": "ALL",
"selected": false
},
{
"rejectionType": "REJECTION_2",
"user": "MALE",
"selected": false
}
]
MyCtrl.selectedRejection = null;
MyCtrl.submit = function() {
console.log(MyCtrl.selectedRejection)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl as MyCtrl">
<div ng-repeat="allrejections in MyCtrl.currentRejections">
<p>
<input type="radio" name="selected" ng-model="MyCtrl.selectedRejection" ng-value="allrejections" /> {{allrejections.rejectionType}}
</p>
</div>
<button type="button" ng-click="MyCtrl.submit()">OK</button>
</div>
</body>