2017-09-02 58 views
0

我正在获取角度js控制器中的数组。我能够在控制器中获得特别的价值。但我无法查看(HTML)。数组键值从角度js中的控制器中获取html?

控制器:

var statusLength= res.fsus.length; 
for(var i=0; i<statusLength; i++) 
{  
     $scope.opts=res.fsus[i].statusMessageType.MasterConsignment.ReportedStatus.ReasonCode 

} 

在这个循环中,我能得到特殊的价值。我想在视图(HTML)部分显示这些值。我是角js新手。我不确定自己做得对不对。

值是环

VAR

禁令

但是,当我试图在UI(HTML)得到那么这将只显示V A河不显示var禁令。这是只显示V A [R

HTML

<li ng-repeat=" opt in opts"> 
     <span class="step">{{opt}}</span> 
</li> 

JSON

fsus[{ 
    statusMessageType:{ 
     MasterConsignment:{ 
      ReportedStatus:{ 
      ReasonCode:"var" 
      } 
      } 
     }, 
    statusMessageType:{ 
     MasterConsignment:{ 
      ReportedStatus:{ 
      ReasonCode:"car" 
      } 
      } 
     }, 
    statusMessageType:{ 
     MasterConsignment:{ 
      ReportedStatus:{ 
      ReasonCode:"ban" 
      } 
      } 
     }, 
}] 

请分享你的想法。感谢

回答

1

所有的JSON的首先不是一个有效的,改变它,

[{ “statusMessageType”:{ “MasterConsignment”:{ “ReportedStatus”:{ “ReasonCode”: “VAR” }} } },{ “statusMessageType”:{ “MasterConsignment”:{ “ReportedStatus”:{ “ReasonCode”: “汽车” }} }},{ “statusMessageType”:{ “MasterConsignment”:{ “ReportedStatus”:{ “ReasonCode”: “封杀” }} }}]

您可以使用NG-有曲目重复由$指数显示选项

<li ng-repeat="test in res.fsus track by $index"> 
     <span class="step"> {{test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}} 
     </span> 
</li> 

DEMO

var app = angular.module('testApp',[]); 
 
app.controller('testCtrl',function($scope){ 
 
    $scope.res ={}; 
 
    $scope.res.fsus = [ 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "var" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "car" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "ban" 
 
     } 
 
     } 
 
    } 
 
    } 
 
]; 
 
    
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="testApp" ng-controller="testCtrl"> 
 
<li ng-repeat="test in res.fsus track by $index"> 
 
    <span class="step"> {{test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}} 
 
    </span> 
 
</li> 
 
</body>

+0

答案有帮助吗? – Sajeetharan

+0

是的。谢谢您的帮助。但我想要另外一个领域。现在我正在打包。但是Field的日期类似2017-10-01T02:00:00.000Z。我想转换成。 YYYY-DD-MM @ HH:MM。我们可以用你的方法转换吗? –

+0

你可以使用moment.js或angular-moment库进行转换。 – Sajeetharan

0

我认为你需要填写opts变量像数组:

$scope.opts = []; //define empty array 
var statusLength = res.fsus.length; 

for(var i=0; i<statusLength; i++) 
{  
    // insert into array 
    $scope.opts[i] = res.fsus[i].statusMessageType.MasterConsignment.ReportedStatus.ReasonCode 
} 
0

什么你在模板循环是错误的:

你应该循环的fsus值则显示ReasonCode

// Put fsus in $scope 
$scope.fsus = res.fsus; 

然后在您的模板中:

<li ng-repeat="statusMessageType in fsus"> 
    <span class="step"> 
    {{statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}} 
    </span> 
</li> 

希望有所帮助。