2016-06-11 40 views
0

我有一個名爲(現在)0.json的json文件。我想在json對象中顯示某些數組作爲單獨的值(可能將它們顯示爲徽章)。如何在JSON數組中顯示單個值angualrjs

這裏是我的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時,我只是在視圖中獲得完整的數組。

我該如何管理我的控制器?

+0

安置自己的HTML。將顯示 – dfsq

+0

html – Ben

回答

1

只是窩另一NG重複你的主要的一個裏面,所以沿着線:

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

或者其他但是你希望它們出現。

0

,而不是這樣的:
<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> 

希望幫助,祝你好運的每個值。

0

嘗試使用索引

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