如何通過在Json中使用ClientID來使用ng-repeat track

這是我在控制器中的代碼..我在json中使用了2個元素並將它傳遞給作用域。如何通過在Json中使用ClientID來使用ng-repeat track

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="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="js/angular.min.js"></script> 
 
<script src="js/angular-animate.min.js"></script> 
 
<script src="js/angular-aria.min.js"></script> 
 
<script src="js/angular-material.min.js"></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"> 
 
\t \t  <li ng-repeat="chosen in response track by chosen.ClientID"> 
 
\t \t  \t {{chosen.VisitName}} 
 
      {{chosen.Phone}} 
 
      {{chosen.POC}} 
 
\t \t  </li> 
 
\t \t </ul> 
 
    <!-- <div> 
 
    <span>{{response}}</span> 
 
    </div> 
 
    <span>{{error}}</span>--> 
 
    </div> 
 
    </body> 
 
</html>

沒有輸出來在HTML頁面中，找遍了所有的例子和計算器的解決方案，但我不能找到確切的解決方案，大家好，請幫我傢伙..

來源

2016-01-23 Om Bala

你必須在$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"> 
 
\t \t  <li ng-repeat="chosen in response[0] track by chosen.ClientID"> 
 
\t \t  \t {{chosen.VisitName}} 
 
      {{chosen.Phone}} 
 
      {{chosen.POC}} 
 
\t \t  </li> 
 
\t \t </ul> 
 
    <!-- <div> 
 
    <span>{{response}}</span> 
 
    </div> 
 
    <span>{{error}}</span>--> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-01-23 16:40:24 vorant

非常感謝你的讚美，它的作品完美.. :) –

嗨，這個上面的工作，當我在單獨的項目中使用。當我將它包含在我的整個項目中時，它並不適應不知道爲什麼。 1.我正在使用ng-view，爲不同的視圖使用不同的控制器，2.使用工廠中的web服務獲取值$ scope.response ABOVE並存儲，檢索和獲取它。3.我得到這個存儲的值在一個控制器中，並在一個HTML頁面中使用它，它不顯示任何內容.. –

這是因爲響應是陣列的陣列而不是單個維度的陣列擺脫額外的尖括號：

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 
} 
]; 

});

來源

2016-01-23 13:43:26

謝謝你Gabriel的我會檢查它..你可以請建議任何其他這種方式..我們可以添加這個數組名稱.. ??以及如何 –

如何通過在Json中使用ClientID來使用ng-repeat track

回答

相關問題