2016-10-03 90 views
0

我試圖做一個角JS應用程序,顯示註釋。 所有筆記都存儲在note.json文件中,應用程序的主頁面只顯示所有筆記的幾個字段。 我想添加功能,打開一個新的頁面,如果我點擊一個特定的筆記。 新頁面應顯示所引用的單擊註釋的所有數據。Angular JS,從JSON文件導入一些特定的數據

我有一個show.html文件,它是所選註釋的模板,還有一個notes-show-controller.js,當我點擊主頁面上的一個註釋時,應該只從註釋中導入一些特定的數據.json文件。 下面兩個文件的代碼:

show.html

<div class="col-sm-12"> 
<p>{{note.title}}</p> 
<p>Created By: {{note.user}}</p> 

<p>Description:</p> 
<p>{{note.description}}</p> 

<p>Contents:</p> 
<p>{{note.content}}</p> 
</div> 

音符出現,controller.js

angular.module('NotesApp').controller('NotesShowController', function($http, $routeParams) { 
var controller = this; 
controller.notes = []; 


$http.get('notes/'+ $routeParams.id).success(function(data){      
    controller.notes = data; 
}) 
}); 

我的問題是:是否有可能從JSON文件導入,它是一個對象數組,只有特定對象的幾個字段?如果不是,我該如何解決我的問題? 這裏是notes.json文件

[ 
{ 
    "id": 1, 
    "users":"Fabio", 
    "title":"questa è la prima nota", 
    "description": "blablablablablablablabla", 
    "content":"èoisèdoifjèosijdfèosjdfèoijsèdofij" 
}, 
{ 
    "id": 2,   
    "users":"Francesco",   
    "title":"questa è la seconda nota", 
    "description": "huhuhuuhuhuhuhuuhuuhuhuh", 
    "content":"èoisèdoifjèosijdfèosjdfèoijsèdofij" 
}, 
{ 
    "id": 3,   
    "users":"Fernando",    
    "title":"questa è la terza nota", 
    "description": "cicicicicicicicicicicici", 
    "content":"èoisèdoifjèosijdfèosjdfèoijsèdofij" 
} 
] 

如果有助於解決我的問題,我也做了一個Plunker文件,顯示所有的應用程序,這裏是鏈接:

Plunker File

在此先感謝任何能夠幫助我的人。

+1

反正你必須閱讀所有的JSON文件。所以檢索所有的JSON,然後篩選你需要的東西 – Weedoze

+0

如何過濾只導入我需要的json文件?你能舉個例子嗎? –

+0

根據什麼標準篩選?搜索如何使用角度過濾器或如何自己過濾陣列並不難 – charlietfl

回答

1

所有數據都在JSON文件中。基於此,我已將NotesShowController更新爲find()$http.get()響應並顯示有關「顯示」視圖的信息。

Working Plunker

NotesShowController:

angular 
    .module('NotesApp') 
    .controller('NotesShowController', ['$http', '$routeParams', function ($http, $routeParams) { 
     var controller = this; 
     controller.note = {}; 

     $http.get('notes.json').success(function (data) { 
      controller.note = data.find(function (n) { 
       return n.id === $routeParams.id; 
      }); 
     }); 
    }]); 

顯示視圖:

<div class="col-sm-12"> 
    <p>{{showController.note.title}}</p> 
    <p>Created By: {{showController.note.users}}</p> 

    <p>Description:</p> 
    <p>{{showController.note.description}}</p> 

    <p>Contents:</p> 
    <p>{{showController.note.content}}</p> 
</div> 
+0

只是一個問題。爲什麼我必須在show.html文件中指定控制器名稱(如果我已經在route.js中定義了它)? –

+0

您的路由器文件被配置爲這樣做:'控制器作爲showController' –

+0

是的,當然,對不起! XD –