数组中的Ng重复数组

时间:2017-03-16 05:57:00

标签: javascript angularjs arrays

我是角度js的新手,正在查看角度doc中的文档。我试过这种方式,但没有显示数据。我做错了吗?

我的阵列:

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

5 个答案:

答案 0 :(得分:2)

&#13;
&#13;
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'
      }
    ];

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

答案 1 :(得分:0)

试试这个

 <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>

答案 2 :(得分:0)

您可以更改第一个化学品

<tr role="row" ng-repeat="newchemical in newArray.chemical by $index">
            <td class="sorting_1">{{newchemical.chem_status}}</td>

答案 3 :(得分:0)

您在此处犯的错误是您忘记将comma放入$scope.newArray数组中,因此它会出现语法错误。将comma放在chemical:[],

之后

试试这个

&#13;
&#13;
<!DOCTYPE html>
<html ng-app="testAppApp">
<head>
	<title></title>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
	<script type="text/javascript">
		

		var testAppApp = angular.module('testAppApp', []);

		testAppApp.controller('SimpleController', function ($scope) {
			$scope.newArray = [{
				name: 'Robert',
				chemical: [{
					chem_status:"Active",
					chem_code:"0098A"
				}],
				place: 'London'
			},
			{
				name: 'Andy',
				chemical: [{
					chem_status:"Active",
					chem_code:"0098A"
				}],
				place: 'London'
			}
			]
		});
	</script>
</head>
<body ng-controller="SimpleController">
	<div ng-repeat="data in newArray">
		{{data.name}}:
		<div ng-repeat="temp in data.chemical">
			{{temp.chem_status}}

			{{temp.chem_code}}

		</div>

	</div>
</body>
</html>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

在上面的代码中,$ scope.newArray本身就是一个数组。所以我们需要首先迭代外部数组,然后迭代内部数组。

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

以上将为您提供完美的结果