如何在Json中使用ClientID来使用ng-repeat轨道

时间:2016-01-23 13:38:38

标签: arrays angularjs json angularjs-ng-repeat

这是我在控制器中的代码。我在json中使用了2个元素并将其传递给了范围。



<table>
  <tbody>
    <tr>
      <td>a</td>
      <td id="b">b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
      <td>f</td>
      <td>g</td>
      <td>h</td>
      <td>i</td>
      <td id="j">j</td>
      <td>k</td>
    </tr>
  </tbody>
</table>
&#13;
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
  $scope.response=
  [
    [{
      "VisitName":"Brand",
    "ClientName":"Software Solutions",
    "POC":" Name",
    "ClientID":"1",
    "Phone":"9884563143",
    "logID":null,
    "empID":"1",
    "Active":null,
    "Code":null,
    "dat":null},
  {
    "VisitName":"Service",
    "ClientName":"Software Solutions",
    "POC":"Name",
    "ClientID":"2",
    "Phone":"9884563143",
    "logID":null,
    "empID":"1",
    "Active":null,
    "Code":null,
    "dat":null
}]
]

});

 
&#13;
&#13;
&#13;

html页面中没有输出,搜索了所有示例和stackoverflow解决方案,但我无法找到确切的解决方案的人,请帮帮我们..

2 个答案:

答案 0 :(得分:2)

您在$scope.response数组中有数组 只使用一个数组

$scope.response= [{...},{...}]

或在模板中选择数组中的第一个元素(如果您无法更改$scope.response

<li ng-repeat="chosen in response[0] track by chosen.ClientID">

var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
  $scope.response=
  [
    [{
      "VisitName":"Brand",
    "ClientName":"Software Solutions",
    "POC":" Name",
    "ClientID":"1",
    "Phone":"9884563143",
    "logID":null,
    "empID":"1",
    "Active":null,
    "Code":null,
    "dat":null},
  {
    "VisitName":"Service",
    "ClientName":"Software Solutions",
    "POC":"Name",
    "ClientID":"2",
    "Phone":"9884563143",
    "logID":null,
    "empID":"1",
    "Active":null,
    "Code":null,
    "dat":null
}]
]

});

 
Below is the html code which i used to repeat json array.. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Service</title>


    <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.jss"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <div ng-controller="customersCtrl" ng-cloak>
 <h1>Values</h1>
 <ul class="chosen" dnd-list="model">
		    <li ng-repeat="chosen in response[0] track by chosen.ClientID">
		    	 {{chosen.VisitName}}
           {{chosen.Phone}}
           {{chosen.POC}}
		    </li>
		</ul>
    <!-- <div>
     <span>{{response}}</span>
   </div>
   <span>{{error}}</span>-->
   </div>
  </body>
</html>

答案 1 :(得分:1)

这是因为响应是一个数组的数组,而不仅仅是一个维度数组摆脱了额外的尖括号:

var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
  $scope.response=
  [
   {
      "VisitName":"Brand",
    "ClientName":" Software Solutions",
    "POC":"Name",
    "ClientID":"1",
    "Phone":"9884563143",
    "logID":null,
    "empID":"1",
    "Active":null,
    "Code":null,
    "dat":null},
  {
    "VisitName":"Service",
    "ClientName":"Software Solutions",
    "POC":"Name",
    "ClientID":"2",
    "Phone":"9884563143",
    "logID":null,
    "empID":"1",
    "Active":null,
    "Code":null,
    "dat":null
}
];

});