2016-10-03 46 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 –