数组中的Ng重复数组
问题描述:
我是新来的角js,正在通过角度doc中的文档。我试过这种方式,但没有显示数据。难道我做错了什么?数组中的Ng重复数组
我的数组:
$scope.newArray = [{
name: 'Robert',
chemical: [{
chem_status:"Active",
chem_code:"0098A"
}]
place: 'London'
},
{
name: 'Andy',
chemical: [{
chem_status:"Active",
chem_code:"0098A"
}]
place: 'London'
}
];
这里是我的html代码: -
<tr role="row" ng-repeat="chemical in newArray.chemical by $index">
<td class="sorting_1">{{chemical.chem_status}}</td>
答
尝试这样
<div ng-repeat="chemicals in newArray.chemical by $index">
<tr role="row" ng-repeat="chemical in chemicals by $index">
<td class="sorting_1">{{chemical.chem_status}}</td>
答
angular.module("app", [])
.controller("sampleController", function($scope) {
$scope.newArray = [{
name: 'Robert',
chemical: [{
chem_status: "Active",
chem_code: "0098A"
},
{
chem_status: "SomeStatus",
chem_code: "009"
}
],
place: 'India'
},
{
name: 'Robert 2',
chemical: [{
chem_status: "InActive",
chem_code: "0098B"
}],
place: 'Paris'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div data-ng-controller="sampleController">
<div data-ng-repeat="item in newArray track by $index">
<div>Name: {{item.name}}</div>
<div>Place: {{item.place}} </div>
<div style="padding-left:20px" data-ng-repeat="chem in item.chemical track by $index">
<div>Status: {{chem.chem_status}}</div>
<div>Code: {{chem.chem_code}}</div>
<hr/>
<div>
</div>
</div>
</div>
答
你可以改变第一化学
<tr role="row" ng-repeat="newchemical in newArray.chemical by $index">
<td class="sorting_1">{{newchemical.chem_status}}</td>
答
你做这里是你忘了comma
你$scope.newArray
阵列的一个错误,那么它给语法错误。把comma
后chemical:[],
试试这个
<!DOCTYPE html>
<html ng-app="testAppApp">
<head>
\t <title></title>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
\t <script type="text/javascript">
\t \t
\t \t var testAppApp = angular.module('testAppApp', []);
\t \t testAppApp.controller('SimpleController', function ($scope) {
\t \t \t $scope.newArray = [{
\t \t \t \t name: 'Robert',
\t \t \t \t chemical: [{
\t \t \t \t \t chem_status:"Active",
\t \t \t \t \t chem_code:"0098A"
\t \t \t \t }],
\t \t \t \t place: 'London'
\t \t \t },
\t \t \t {
\t \t \t \t name: 'Andy',
\t \t \t \t chemical: [{
\t \t \t \t \t chem_status:"Active",
\t \t \t \t \t chem_code:"0098A"
\t \t \t \t }],
\t \t \t \t place: 'London'
\t \t \t }
\t \t \t ]
\t \t });
\t </script>
</head>
<body ng-controller="SimpleController">
\t <div ng-repeat="data in newArray">
\t \t {{data.name}}:
\t \t <div ng-repeat="temp in data.chemical">
\t \t \t {{temp.chem_status}}
\t \t \t {{temp.chem_code}}
\t \t </div>
\t </div>
</body>
</html>
答
在上面的代码中的$ scope.newArray本身是一个数组。所以我们需要先迭代外部数组,然后迭代内部数组。
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller("MyCtrl",function($scope) {
$scope.name = [{
"name": "Robert",
"chemical": [{
"chem_status":"Active",
"chem_code":"0098A"
}],
"place": "London"
}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-App="myApp" ng-controller="MyCtrl">
Hello,
<table>
<tr ng-repeat="chemicalName in name">
<td class="sorting_1">
<span ng-repeat="status in chemicalName.chemical"> {{status.chem_status}}
</span>
</td>
</tr>
</table>
</div>
上述会给你完美的结果