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

Question

我有一个名为0.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>

我面临的问题是，我无法将实践作为个人价值观来表现。当我将detail.practices绑定到ng-重复时，我只会在视图中得到一个完整的数组。

我将如何在我的控制器中处理这个问题？

Answer 1

只需嵌套另一个ng-在您的主套餐中重复一遍，所以按照以下思路：

<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>