从这个JSON数组中,我需要在angularjs
中构建带有手机号码的动态无线电按钮:
challengeSelectInfo:
[
{"mob_0" : "xxxxx1211"},
{"mob_1" : "xxxxx1211"},
{"mob_2" : "xxxxx1211"}
]
我尝试了ng-repeat
并在challengeSelectInfo
上进行迭代,但是我面临的问题是keys(mob_0,mob_1,mob_2)
不同,我无法生成动态无线电按钮。
任何帮助将不胜感激。
谢谢
您需要为数组指定密钥:
$scope.newArr = [];
angular.forEach(challengeSelectInfo, function(val, key) {
/* do something for all key: value pairs */
$scope.newArr.push({id: key, value: val});
});
然后循环穿过newarr数组,并分配给广播按钮:
<input name="{{item.value}}" type="radio" ng-model="item.id" value="{{item.value}}">
仅出于您的理解目的而做到这一点,希望您可以使用此
来实现自己的要求
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.challengeSelectInfo= [
{"mob_0" : "xxxxx1211"},
{"mob_1" : "xxxxx1211"},
{"mob_2" : "xxxxx1211"} ];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="(k,v) in challengeSelectInfo ">
<div ng-repeat="(x,y) in v">
<input type="radio" />{{y}}
</div>
</div>
</body>
</html>
您可以检查此JSFIDDLE示例
var data = { "challengeSelectInfo" : [ {"mob_0" : "xxxxx1211"},
{"mob_1" : "xxxxx1211"}, {"mob_2" : "xxxxx1211"} ]}
$scope.radioGrp = (data['challengeSelectInfo'] || []).map(function(obj){
for(var i in obj){
return { 'value': i, 'name': obj[i] };
}
});
<input type="radio" ng-repeat="rb in radioGrp" ng-value="rb.value" ng-modal="radioValue" name="{{rb.name}}">