用于 json 对象的 ng-repeat 不起作用

Question

这是我的 html，它会为每个从 $http.get 服务获得的响应创建配置文件。

 <div class="container" ng-controller="profileController" ng-init="loadProfilesData()">
<div ng-repeat="p in profileData">

<div>{{p.company}}</div>
 <div>{{p.country}}</div>

<div gauge-chart class="gauge" id="first-{{p.Id}}" value=p.value*100 min=0 max=100 gauge-width-scale=0.8 title="" 
donut=false relative-gauge-size=true symbol='%' hide-min-max=true></div>




<div gauge-chart class="gauge" id="second-{{p.Id}}" value=p.value*100 min=0 max=100 gauge-width-scale=0.8 title=""  
donut=false relative-gauge-size=true symbol='%' hide-min-max=true></div>






<span>

{{ p.value | date: "hh:mm:ss" }}

</span>
</div>                
  </div>

我得到的回复如下

     {
                   ID: "1",
                   employeeList: {
                      [{"Value":0.003,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}},
{"Value":0.004,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"},
{"Value":0.005,"Stat":{"parameter":0,"Name":"test2","Tag":"Devo102"}]
                   },
                   comapny: "MSDFT",
                   department: "Sales",
                   country: "USA"                  

                },
                {
                   ID: "2",
                   employeeList: null,
                   comapny: "MSDFT",
                   department: "Sales",
                   country: "USA"                  

                },
                {
                   ID: "3",
                   employeeList: [{"Value":0.003,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}},
{"Value":0.004,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"}],
                   comapny: "MSDFT",
                   department: "Sales",
                   country: "USA"                  

                }

因为我得到了名称、值的内部列表，有时我得到这个列表employeeList 为空。我需要为employeeList 设置另一个ng-repeat。请建议我如何绑定，因为订购也是随机的。

Answer 1

使用ng-if检查属性是否为空

<div ng-if="p.employeeList">
     <span>{{p.employeeList.Name }}</span>
     <span>{{p.employeeList.Age}}</span>
     <span>{{p.employeeList.hireDate | date: "hh:mm:ss"}}              </span>
</div>

angular.module("app",[])
.controller("ctrl",function($scope){

  $scope.profilesData = [ {
   ID: "1",
   employeeList: {
      Name: "harry",
      Age:   "20",
      hireDate: 236558.189280
   },
   comapny: "MSDFT",
   department: "Sales",
   country: "USA"                  

},
{
   ID: "2",
   employeeList: null,
   comapny: "MSDFT",
   department: "Sales",
   country: "USA"                  

},
{
   ID: "3",
   employeeList: {
      hireDate: "",
      Name: "marry",          
      Age:   ""

   },
   comapny: "MSDFT",
   department: "Sales",
   country: "USA"                  

}]

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="p in profilesData">
    <span>{{ p.ID }}</span>
    <div>
        <div>{{p.Name}}</div>
        <div>{{p.Age}}</div>                            
    </div>
    <hr />
    <div>
        <span>
        {{ p.hireDate | date: "hh:mm:ss" }}</span>
    </div>
    <hr />
    <div>
        <span>Company</span>
        <span>Department</span>
        <span>Country</span>
    </div>
    <div>
        <span>{{p.comapny }}</span>
        <span>{{p.department}}</span>
        <span>{{p.country}}</span>
    </div>
    <div ng-if="p.employeeList">
        <span>{{p.employeeList.Name }}</span>
        <span>{{p.employeeList.Age}}</span>
        <span>{{p.employeeList.hireDate | date: "hh:mm:ss"}}              </span>
    </div>
  </div> 
</div>

Answer 2

这些字段不需要另一个ng-repeat。您可以像这样访问子 JSON 对象：p.employeeList.hireDate

如果一个值可能是null，您可以使用ng-if 检查并选择是否要显示 HTML。

示例：

<div ng-repeat="p in profilesData">
    <div>
        <span ng-if="p.employeeList != null">{{ p.employeeList.hireDate | date: "hh:mm:ss" }}</span>
    </div>
</div>

Answer 3

您不需要再进行一次 ng-repeat，因为 employeeList 是一个对象。

你可以像这样访问它，

<div>
    <span>{{p.employeeList.Name }}</span>
    <span>{{p.employeeList.Age}}</span>
    <span>{{p.employeeList.hireDate}}</span>
</div>

var myApp = angular.module('myApp', [])
myApp.controller('profileController', function ($scope) {
    $scope.profilesData = [{
            ID: "1",
            employeeList: {
                Name: "harry",
                Age: "20",
                hireDate: 236558.189280
            },
            comapny: "MSDFT",
            department: "Sales",
            country: "USA"

        },
        {
            ID: "2",
            employeeList: null,
            comapny: "MSDFT",
            department: "Sales",
            country: "USA"

        },
        {
            ID: "3",
            employeeList: {
                hireDate: "",
                Name: "marry",
                Age: ""

            },
            comapny: "MSDFT",
            department: "Sales",
            country: "USA"

        }
    ];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app='myApp'>
    <div class="container" ng-controller="profileController">
                    <div ng-repeat="p in profilesData">
                        <span>{{ p.ID }}</span>
                        <div>
                            <div>{{p.Name}}</div>
                            <div>{{p.Age}}</div>                            
                        </div>
                        <hr />
                        <div>
                            <span>
                            {{ p.hireDate | date: "hh:mm:ss" }}</span>
                        </div>
                        <hr />
                        <div>
                            <span>Company</span>
                            <span>Department</span>
                            <span>Country</span>
                        </div>
                        <div>
                            <span>{{p.company }}</span>
                            <span>{{p.department}}</span>
                            <span>{{p.country}}</span>
                        </div>
                         <div  ng-if="p.employeeList">
                            <span>{{p.employeeList.Name }}</span>
                            <span>{{p.employeeList.Age}}</span>
                            <span>{{p.employeeList.hireDate}}</span>
                        </div>
                    </div>
                </div>
</div>

Answer 4

<!DOCTYPE html>
<html>
<head>
	<title>Get method</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

	<table>
		<tr>
			<th ng-repeat="(key, val) in result[0]">{{key}}</th>
		</tr>
		<tr ng-repeat="item in result">
			<td ng-repeat="(key, val) in item">{{val}}</td>			
		</tr>
	</table>

	<script type="text/javascript">
		var data = {
		  "records": [
		    {
		      "Name": "Alfreds Futterkiste",
		      "City": "Berlin",
		      "Country": "Germany"
		    },
		    {
		      "Name": "Ana Trujillo Emparedados y helados",
		      "City": "México D.F.",
		      "Country": "Mexico"
		    },
		    {
		      "Name": "Antonio Moreno Taquería",
		      "City": "México D.F.",
		      "Country": "Mexico"
		    },
		    {
		      "Name": "Around the Horn",
		      "City": "London",
		      "Country": "UK"
		    },
		    {
		      "Name": "B's Beverages",
		      "City": "London",
		      "Country": "UK"
		    },
		    {
		      "Name": "Berglunds snabbköp",
		      "City": "Luleå",
		      "Country": "Sweden"
		    },
		    {
		      "Name": "Blauer See Delikatessen",
		      "City": "Mannheim",
		      "Country": "Germany"
		    },
		    {
		      "Name": "Blondel père et fils",
		      "City": "Strasbourg",
		      "Country": "France"
		    },
		    {
		      "Name": "Bólido Comidas preparadas",
		      "City": "Madrid",
		      "Country": "Spain"
		    },
		    {
		      "Name": "Bon app'",
		      "City": "Marseille",
		      "Country": "France"
		    },
		    {
		      "Name": "Bottom-Dollar Marketse",
		      "City": "Tsawassen",
		      "Country": "Canada"
		    },
		    {
		      "Name": "Cactus Comidas para llevar",
		      "City": "Buenos Aires",
		      "Country": "Argentina"
		    },
		    {
		      "Name": "Centro comercial Moctezuma",
		      "City": "México D.F.",
		      "Country": "Mexico"
		    },
		    {
		      "Name": "Chop-suey Chinese",
		      "City": "Bern",
		      "Country": "Switzerland"
		    },
		    {
		      "Name": "Comércio Mineiro",
		      "City": "São Paulo",
		      "Country": "Brazil"
		    }
		  ]
		}

		var app = angular.module("myApp", []);
		app.controller("myCtrl", function($scope){
			$scope.result = data.records;
		});
	</script>
</body>
</html>