2017-03-16 90 views
0

我是新來的角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> 

回答

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

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>

0

你可以改變第一化學

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

你做這裏是你忘了comma$scope.newArray陣列的一個錯誤,那麼它給語法錯誤。把commachemical:[],

試試這個

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

0

在上面的代碼中的$ 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>

上述會給你完美的結果