1

私は AngularJS の初心者ですが、それを習得することに非常に熱心であるため、私の無知を忘れてください。基本的なブログを作成するのに 2 つの問題があります。

問題 #1: $http を使用し、JSON を完全に受け取るコントローラーがあります。

これは app.js です:

angular.module('blogApp', []).config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/home', {
    templateUrl : 'home.html'
}).when('/post/:postId', {
    templateUrl : 'post.html',
    controller : postCtrl
}).otherwise({
    redirectTo : '/home'
});
}]);

これは controller.js です:

function postCtrl($scope, $http, $routeParams) {
$http.get('post.php?id=' + $routeParams.postId).success(function(data) {
    $scope.post = data;
});

$scope.description = $scope.post.meta_description;  /*I can't access this value*/

}

これは、#/post/123 が使用されたときに $scope.post が受け取る JSON です。

[
    {
        'id':'123',
        'title':'title of the post',
        'date':'2013-06-14',
        'content':'This is the content of the post.<br>She had a yellow house.',
        'meta_description':'description of my first post.'
    }
]

問題は、controller.js で $scope.post.meta_description にアクセスできないことです。また、$scope.post[0].meta_description、data.post.meta_description、および data.post[0].meta_description を試してみましたが、肯定的な結果は得られませんでした。

問題 #2: post.html には、このコードがあります

<div>
    <h1>{{post[0].title}}</h1>
    <h2>Published on {{post[0].date}}</h2>
    {{post[0].content}}
</div>

私は完全な AngularJS のチュートリアルを練習しました。{{post.title}} を使用する必要がありますが、AngularJS は何も出力しません。それを解決するために、{{post[0].title}} を使用します。なぜこれが起こるのですか？

4

3 に答える 3

1

結論:問題 #2について。2 種類の JSON があります。

a)この単一行のようなJSONObject :

{
    'id':'123',
    'title':'my house'
}

b)この単一行のようなJSONArray :

[
    {
       'id':'123',
        'title':'my house'
    }
]

ブラケットが見えますか？または、この他の JSONArray のように:

[
    {
       'id':'123',
        'title':'my house'
    },
    {
       'id':'124',
       'title':'my car'
    }
]

JSONObjects では、テンプレートで {{post.title}} を使用する必要があります。

<div>
    {{post.title}}
</div>

{{post[0].title}} は、データが配列ではないため、エラーになります。ブラケットは使用しません。

また、JSONArrays (1 つ以上の行) を使用すると、次のようにテンプレートで ng-repeat を使用できます。

<div ng-repeat="post in post">
    {{post.title}}
</div>

または、特定の行に直接アクセスすることもできます:

<div>
    {{post[0].title}}
    <br>
    {{post[1].title}}
</div>

問題＃1については、ここで説明したようなものを使用できます：

AngularJS のチュートリアル ($resource) のステップ #11

しかし、単一の変更を行う方が簡単であることがわかりました。これは私の以前のコードです:

function postCtrl($scope, $http, $routeParams) {
    $http.get('post.php?id=' + $routeParams.postId).success(function(data) {
        $scope.post = data;
    });

    $scope.description = $scope.post.meta_description;  /*I can't access this value*/
}

問題は、$scope.post が $http.get 内の関数内にのみ存在することです。関数の外からアクセスできないプライベート変数のようなものです。

したがって、$resource を使用するよりも簡単な解決策は、$scope.description を $http.get 内に移動することでした。

function postCtrl($scope, $http, $routeParams) {
    $http.get('post.php?id=' + $routeParams.postId).success(function(data) {
        $scope.post = data;
        $scope.description = data.meta_description;
    });
}
于 2013-06-16T04:27:54.613 に答える
1

最初の1つ

$scope.description = $scope.post[0].meta_description;

Arrayサーバーは、タイプが の単一アイテムで返されることに注意してくださいHash。

あなたの悩みの手がかりになると思います。

于 2013-06-14T19:00:47.490 に答える
1

したがって、次のようなことをする必要があります

問題 2 の投稿で ng-repeat 投稿を繰り返します。

問題 1 については、実際の http 呼び出しを行う必要があると思います。

$scope.post = // データを取得するための関数呼び出し。

于 2013-06-14T18:58:21.953 に答える