如何在angularjs中填充和渲染具有对象数组的json

时间:2019-03-24 16:33:45

标签: html angularjs

我有一个简单的对象数组,其中包含再次数组,我需要在angularjs中调用并使用ng repeat进行填充。这里我需要在

标签中填充子链接。输出应该像

一样接连出现
Project1a
Project1b
Project1c
Project1d
Project1e

但是现在输出像

["Project1a","Project1b","Project1c","Project1d","Project1e"]

这是下面带有html和angularjs的代码。

html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in records">{{x.sublink}}</p> 
</div

脚本

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records =[{
        "project_id": "1001",
        "project_name": "Project1",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager1",
        "duration": "3 Years",
        "team_size": "10",
        "sublink": ["Project1a", "Project1b", "Project1c", "Project1d", "Project1e"]
    }]


});

<div ng-repeat="x in records">
    <p ng-repeat="link in x">{{link.sublink}}</p>
</div>

不起作用

1 个答案:

答案 0 :(得分:1)

您正在遍历x,但需要遍历x.sublink

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="x in records">

    <p ng-repeat="link in x.sublink">
      {{link}}
    </p>
  </div>
</div>

var BaseApp = angular.module('myApp', ['ngResource']);

BaseApp.run(function($rootScope) {

})

BaseApp.controller("myCtrl", function($scope) {
  $scope.records = [{
    "project_id": "1001",
    "project_name": "Project1",
    "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
    "project_manager": "Manager1",
    "duration": "3 Years",
    "team_size": "10",
    "sublink": ["Project1a", "Project1b", "Project1c", "Project1d", "Project1e"]
  }]


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.0.5/angular-resource.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="x in records">

    <p ng-repeat="link in x.sublink">
      {{link}}
    </p>
  </div>
</div>