[英]Angular JS, importing some specifics data from a JSON file
I'm trying to make an angular JS app that displays notes. 我正在尝试制作一个显示笔记的有角JS应用程序。 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.
所有笔记都存储在note.json文件中,应用程序的主页仅显示所有笔记的少数字段。 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.
新页面应显示与单击的注释有关的所有数据。
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. 我有一个show.html文件,它是所选笔记的模板,还有一个notes-show-controller.js,当我单击主页上的笔记时,应仅从note.json文件中导入一些特定数据。 Here the code of the two file:
这里是两个文件的代码:
show.html 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 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? 我的问题是:是否可以从json文件(该对象是一个数组,仅一个特定对象的几个字段)导入? and if not, how can I solve my problem?
如果没有,我该如何解决我的问题? Here is the notes.json file
这是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文件来显示所有应用程序,这里是链接:
Thanks in advance to anyone who can help me. 在此先感谢任何可以帮助我的人。
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()
响应,并在“显示”视图上显示信息。
Working Plunker : 工作柱塞 :
NotesShowController: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.