Question

我正在尝试创建一个显示备注的角度JS应用程序。所有笔记都存储在note.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

提前感谢任何可以帮助我的人。

Answer 1

您的所有数据都在JSON文件中。基于此，我已将NotesShowController更新为find() $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;
            });
        });
    }]);

显示视图：

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

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

1 个答案: