迭代通過在對象屬性中angularjs

列表我有陣列此目的：迭代通過在對象屬性中angularjs

"{ 
    "Drivers":[ 
     { 
      "Id":"41ba341a-e50f-4878-b55e-6c96ef5027b0", 
      "FirstName":"John", 
      "LastName":"David", 
      "MiddleName":"Smity", 
      "Party":{ 
       "Id":"12rtb67-fa45-4e77-998c-123fgyh764", 
       "Name":"The Smith Family", 
       "CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161" 
      } 
     }, 
     { 
      "Id":"f37ff0c7-294d-43d1-a790-11af1f6f3e91", 
      "FirstName":"John", 
      "LastName":"Smith", 
      "MiddleName":"David", 
      "Party":{ 
       "Id":"f2a82558-fa45-4e77-998c-29160f30f9f6", 
       "Name":"The Smith Family", 
       "CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161" 
      } 
     } 
    ] 
}"

欲遍歷驅動程序對象和在angularjs的foreach顯示這些值。

這就是我想：

<table data-ng-controller="DriverController"> 
    <thead> 
    <tr> 
     <th>Name</th> 
    </tr> 
    </thead> 
    <tbody data-ng-repeat="driver in Drivers.Drivers"> 
    <tr> 
     <td>{{driver.FirstName}}</td> 
    </tr> 
    </tbody> 
</table>

它並沒有幫助。

我也試過：

<table data-ng-controller="DriverController"> 
    <thead> 
    <tr> 
     <th>Name</th> 
    </tr> 
    </thead> 
    <tbody data-ng-repeat="driver in Drivers"> 
    <tr> 
     <td>{{driver.FirstName}}</td> 
    </tr> 
    </tbody> 
</table>

但我得到了同樣的結果，沒有在屏幕上顯示的數據。

任何想法如何解決這個問題，迭代通過數組的屬性，並顯示結果在表中，因爲我試着在這個例子中？

感謝

來源

2015-10-20 Laziale

' 「{」驅動程序「：[{」 ID 「：」 4'什麼變量被設置爲等於該對象？ –

另外，這是一個字符串。剛剛注意到，當我編輯。嘗試解析它？ – Jorg

是的，這應該是有效的JSON，所以你可以對字符串做JSON.parse把它變成一個JS對象。 –

你JSON是在本例中的字符串。如果這是您從服務器接收它的方式，則需要解析它。除非，在你的代碼在此plunker：http://plnkr.co/edit/x2IJRCUUTqpYnombadzn?p=preview

<table data-ng-controller="DriverController"> 
        <thead> 
         <tr> 
          <th>Name</th> 
         </tr> 
        </thead> 
        <tbody data-ng-repeat="driver in drivers.Drivers"> 
         <tr> 
          <td>{{driver.FirstName}}</td> 
         </tr> 
        </tbody> 
       </table> 


$scope.drivers = { 
    "Drivers":[ 
     { 
      "Id":"41ba341a-e50f-4878-b55e-6c96ef5027b0", 
      "FirstName":"John", 
      "LastName":"David", 
      "MiddleName":"Smity", 
      "Party":{ 
       "Id":"12rtb67-fa45-4e77-998c-123fgyh764", 
       "Name":"The Smith Family", 
       "CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161" 
      } 
     }, 
     { 
      "Id":"f37ff0c7-294d-43d1-a790-11af1f6f3e91", 
      "FirstName":"John", 
      "LastName":"Smith", 
      "MiddleName":"David", 
      "Party":{ 
       "Id":"f2a82558-fa45-4e77-998c-29160f30f9f6", 
       "Name":"The Smith Family", 
       "CustomerId":"01d84752-ad12-4dfa-af63-65d12052a161" 
      } 
     } 
    ] 
}

來源

2015-10-20 03:42:38 buzzsaw

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="Scripts/angular.js"></script> 
    <script> 
     var app = angular.module('myApp', []); 
     app.controller('MyCtrl', function ($scope) { 
      $scope.Drivers = 
      [ 
       { 
        "Id": "41ba341a-e50f-4878-b55e-6c96ef5027b0", 
        "FirstName": "John", 
        "LastName": "David", 
        "MiddleName": "Smity", 
        "Party": { 
         "Id": "12rtb67-fa45-4e77-998c-123fgyh764", 
         "Name": "The Smith Family", 
         "CustomerId": "01d84752-ad12-4dfa-af63-65d12052a161" 
        } 
       }, 
       { 
        "Id": "f37ff0c7-294d-43d1-a790-11af1f6f3e91", 
        "FirstName": "John", 
        "LastName": "Smith", 
        "MiddleName": "David", 
        "Party": { 
         "Id": "f2a82558-fa45-4e77-998c-29160f30f9f6", 
         "Name": "The Smith Family", 
         "CustomerId": "01d84752-ad12-4dfa-af63-65d12052a161" 
        } 
       } 
      ]; 

     }); 
    </script> 
</head> 
<body ng-app="myApp" ng-controller="MyCtrl"> 
    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
      </tr> 
     </thead> 
     <tbody data-ng-repeat="driver in Drivers"> 
      <tr> 
       <td>{{driver.FirstName}}</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

來源

2015-10-20 12:32:22 Ashokreddy

謝謝，由於某種原因數組或更好地說，持有該數組的字符串不工作預期。我不知道我需要做什麼從字符串轉換爲json數組。 – Laziale

迭代通過在對象屬性中angularjs

回答

相關問題