angularjs中生成动态单选按钮

时间:2016-12-27 05:46:11

标签: javascript angularjs

从这个json数组我需要在angularjs中构建带有移动号码的动态单选按钮:

challengeSelectInfo:
[
    {"mob_0" : "xxxxx1211"},
    {"mob_1" : "xxxxx1211"},
    {"mob_2" : "xxxxx1211"}
]

我尝试ng-repeat并迭代challengeSelectInfo,但我遇到的问题是keys(mob_0,mob_1,mob_2)不同,我无法生成动态单选按钮。

感谢任何帮助。

由于

3 个答案:

答案 0 :(得分:1)

您需要为数组指定键:

$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}}">

答案 1 :(得分:0)

只是为了您的理解目的,希望您可以通过使用此

来达到您的要求

&#13;
&#13;
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.challengeSelectInfo= [
    {"mob_0" : "xxxxx1211"},

{"mob_1" : "xxxxx1211"},

{"mob_2" : "xxxxx1211"} ];


});
&#13;
<!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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以查看 JSFIDDLE Example

IQueryable