数据

Question

我正在使用angularjs，我有一组数据需要使用ng-repeat绑定到表。我试过这样但是我无法在子数组中输出我的数据，所以我无法重复绑定，任何人都可以帮助如何做到这一点。

数据

 $scope.SubData=[{
    Name: '1',
    Subject: [{
        tamil: 12,
        english: 21,
        social: 45
    }]
},
{
    Name: '2',
    Subject: [{
        tamil: 10,
        english: 20,
        social: 30,
        geo: 40
    }]
}]

预期输出应该如下所示

注意：主题名称是动态

Answer 1

你可以这样做：

<table ng-repeat="stu in SubData">
  <tr>
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(key, val) in stu.Subject[0]">
        {{key}}:{{val}}
     </td>
  </tr>
</table>

以下是plunker

希望这有帮助。

Answer 2

试试这个，它正是你需要的：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th,
    td {
        padding: 5px;
        text-align: left;
    }
    table#t01 tr:nth-child(even) {
        background-color: #eee;
    }
    table#t01 tr:nth-child(odd) {
        background-color: #fff;
    }
    table#t01 th {
        background-color: black;
        color: white;
    }
</style>

<body ng-app="myApp" ng-controller="myCtrl">

    <table border="1">
        <tr>
            <th>Name</th>
            <th>Subject</th>
        </tr>
        <tr ng-repeat="x in SubData">
            <td>{{ x.Name }}</td>
            <td><label ng-repeat="(key, value) in x.Subject"><label ng-repeat="(k,z) in value">{{k}} - {{z}}<label ng-show="!$last"> ,</label> <br></label></label>
            </td>
        </tr>
    </table>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
            $scope.SubData = [{
                    Name: '1',
                    Subject: [{
                        tamil: 12,
                        english: 21,
                        social: 45
                    }]
                },
                {
                    Name: '2',
                    Subject: [{
                        tamil: 10,
                        english: 20,
                        social: 30,
                        geo: 40
                    }]
                }
            ]
        });
    </script>
</body>
</html>

输出：

Answer 3

＆＃13;

function ClickToEditCtrl($scope) {
  $scope.SubData=[{Name:'1',Subject:[{tamil:12,english:21,social:45}]},
              {Name:'2',Subject:[{tamil:10,english:20,social:30,geo:40}]}]
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ClickToEditCtrl">
    <table style="border : 1px solid black">
    <thead>
    <td>Name</td>
    <td>Subject</td>
    </thead>
    <tbody>
      <tr ng-repeat="stu in SubData">
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(sub, mark) in stu.Subject[0]">
        {{sub}} : {{mark}}
     </td>
  </tr>
    </tbody>   
</table>
  </div>
</div>

＆＃13;

你可以做双重迭代。我的意思是2 ng-repeat来实现它..

整体列表一个，

<table ng-repeat="stu in SubData">
   <tr>
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(sub, mark) in stu.Subject[0]">
        {{sub}} : {{mark}}
     </td>
  </tr>
</table>

Answer 4

function ClickToEditCtrl($scope) {
  $scope.SubData=[{Name:'1',Subject:[{tamil:12,english:21,social:45}]},
              {Name:'2',Subject:[{tamil:10,english:20,social:30,geo:40}]}]
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ClickToEditCtrl">
    <table style="border : 1px solid black">
    <thead>
    <td style="border: 1px solid black">Name</td>
    <td style="border: 1px solid black">Subject</td>
    </thead>
    <tbody>
      <tr  ng-repeat="stu in SubData">
     <td>
       {{stu.Name}}
     </td>
     <td ng-repeat="(sub, mark) in stu.Subject[0]">
        {{sub}} : {{mark}}
     </td>
  </tr>
    </tbody>   
</table>
  </div>
</div>

Answer 5

试试这个

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
<script type="text/javascript">
	var app = angular.module('uigrid', []);

	app.controller('repeatPeople', ['$scope', '$templateCache', function ($scope) {
		$scope.subData=[{Name:'1',Subject:[{tamil:12,english:21,social:45}]},
		{Name:'2',Subject:[{tamil:10,english:20,social:30,geo:40}]}];

		$scope.getSubData = function (sub) {
			debugger
			var returnData = [];
			for (var key in sub) {
				if (sub.hasOwnProperty(key)) {
					var aa = (key + " : " + sub[key]);
				    // returnData[key] = sub[key];
				    returnData.push(aa);
				}
			}
			return returnData;

		}


	}]);
</script>
</head>
<body ng-app="uigrid">
<div ng-controller="repeatPeople">
	<table>
		<tr ng-repeat="data in subData">
			<td>{{$index+1}}</td>
			<td ng-repeat="(key, val) in data.Subject[0]">
				{{key}}:{{val}} 
			</td>
		</tr>

	</table>

</div>
</body>
</html>

＆＃13;

如何使用AngularJS绑定ng-repeat中的数组数据

数据

5 个答案: