Question

我有一个名为（现在）0.json的json文件。我想在json对象中显示某些数组作为单独的值（可能将它们显示为徽章）。

这是我的json：

[
  {
    "id": "Chinwe Chukuwogu Roy WordPress Biography Website",
    "name": "Chinwe Roy Biography Website",
    "practices": ["UX", "HTML WireFraming", "Front-End Development", "Custom WordPress Theming"],
    "technology": ["WordPress", "HTML", "CSS", "JQuery", "TweenMax", "Inkscape", "Photoshop"],
    "time": "6 Weeks",
    "description": "A biography website celebrating the work of world reknowned Artist, Chinwe Chukwogu Roy",
    "images": "../assets/img/ux.svg",
    "header": "../assets/img/wordpress-project.svg",
    "behance": "https://www.behance.net/gallery/33173663/UI-Design-A-Website-Biography-Project"
  }
]

我在我的控制器中像这样调用json：

$http.get('app/resources/v1/projects/' + $routeParams.id + '.json').success(function (details) {

    $scope.details = details;

});

HTML：

<div class="row" ng-controller="ProjectCtrl">
<ng-header class="header-directive">{{ detail.header }}</ng-header>
<div class="container">
    <div class="row">
        <div class="col-md-12 work-parent" ng-repeat="detail in details">
            <div class="work-child">
                <h1>{{ detail.id }}</h1>
                <br>
                <p>{{ detail.description }}</p>
                <small><strong>technologies:</strong> {{ detail.technology }}</small>
                <small><strong>design practice:</strong> {{ detail.practices }}</small>
                <small><strong>turnaround:</strong> {{ detail.time }}</small>
                <ul class="social-icons">
                    <li class="behance"><a href="{{ detail.behance }}" target="_blank">behance</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</div>

我遇到的问题是我无法将这种做法表现为个别价值观。当我使用ng-repeat绑定detail.practices时，我只是在视图中得到一个完整的数组。

我如何在我的控制器中管理它？

Answer 1

只需将另一个ng-repeat嵌套在主要的内部，所以沿着以下几行：

<small ng-repeat="practice in detail.practices"><strong>design practice:</strong> {{ practice }}</small>

或者您希望它们出现在其他地方。

Answer 2

而不是这个：
<small><strong>design practice:</strong> {{ detail.practices }}</small>

你可以写这个，这样你就得到了数组的每个值

<small><strong>design practice:</strong>
 <ul>
  <li ng-repeat="practice in detail.practices">{{ practice  }}</li>
  </u>
</small>

希望有所帮助，祝你好运。

Answer 3

尝试使用索引

<div class="col-md-12 work-parent" ng-repeat="{index, detail} in details">
  <div class="work-child">
    <h1>{{ detail.id }}</h1>
    <br>
    <p>{{ detail.description }}</p>
    <small><strong>technologies:</strong> {{ detail.technology }}</small>
    <small><strong>design practice:</strong> {{ detail.practices }}
       <div ng-if="detail.practices.length > 0">
          <b ng-repeat="practice in details[index].practices">{{ practice }}</b>
       </div>
    </small>
    <small><strong>turnaround:</strong> {{ detail.time }}</small>
    <ul class="social-icons">
       <li class="behance"><a href="{{ detail.behance }}" target="_blank">behance</a></li>
    </ul>
  </div>
</div>

如何在JSON数组angualrjs中显示单个值

3 个答案: