Angular JS，从JSON文件导入一些特定数据

I’m trying to make an angular JS app that displays notes. All the notes are stored in a note.json file and the main page of the app shows just fews fields of all the notes. I would like to add the feature that open a new page if I click on a particular note. The new page should displays all the data referred to the clicked note.

我正在尝试制作一个显示音符的角度JS应用程序。所有笔记都存储在note.json文件中,应用程序的主页面只显示所有笔记的几个字段。如果我点击特定的笔记,我想添加打开新页面的功能。新页面应显示引用所单击注释的所有数据。

I have a show.html file which is the template of the note selected, and a notes-show-controller.js which, when I click a note on the main page, should import just some specific data from the note.json file. Here the code of the two file:

我有一个show.html文件,它是所选笔记的模板,还有一个notes-show-controller.js,当我点击主页面上的一个笔记时,它应该只从note.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>

notes-show-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;
})
});

My question is: is it possible to import from the json file, which is an array of object, just few fields of a particular object? and if not, how can I solve my problem? Here is the notes.json file

我的问题是:是否可以从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"
}
]

If it help to solve my problem, I've also made a Plunker file that shows all the app, here is the link:

如果它有助于解决我的问题,我还制作了一个显示所有应用程序的Plunker文件,这里是链接:

Plunker File

Thanks in advance to anyone who can help me.

提前感谢能帮助我的人。

1 个解决方案

#1

All your data is in the JSON file.. Based on that I have updated the NotesShowController to find() the $http.get() response and show the information on the Show view.

您的所有数据都在JSON文件中。基于此,我更新了NotesShowController以查找()$ http.get()响应,并在Show视图中显示信息。

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;
            });
        });
    }]);

Show view:

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

#1