angular js 中的控制器在 html 中获取数组键值？

Question

我正在 angular js 控制器中获取键数组。而且我能够在控制器中获得特定的价值。但是我看不到(HTML).

控制器：

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

}

在这个循环中，我可以获得特定的值。我想在 View(HTML) 部分显示这些值。我是 angular js 的新手。我不确定我做的对不对。

值在循环中

变量
汽车
禁令

但是当我尝试进入 UI(HTML) 时，它将只显示 v a r。不显示 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"
             }
           }
       },
}]

请分享您的想法。谢谢

Answer 1

你在模板中循环的内容是错误的：

您应该循环 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>

希望对您有所帮助。

Answer 2

首先你的JSON不是一个有效的，把它改成，

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

您可以使用 ng-repeat 和 track by $index 来显示选项

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

演示

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>

angular js 中的控制器在 html 中获取数组键值？

Array key value get in html from controller in angular js?

html

javascript

json

angularjs

angularjs-ng-repeat