3

私はAngularJSを少し学んでいる途中で、つまずきにぶつかりました。JSON を取得してフロントエンドにフィードすることはできますが、新しいビューに移動するときに問題が発生します。IDが正しく入力されません。基本的に、ID 1 のアイテムをクリックすると、ID 14 が表示されます。または、TypeError: Cannot read property '14' of undefined が表示されます

どんなアイデアでも本当に役に立ちます。

JSON

[
    {
        "id": 14,
        "title": "new post",
        "excerpt": "EXCERPT",
        "content": "ushajsd"
    },
    {
        "id": 10,
        "title": "last post",
        "excerpt": "test",
        "content": "test"
    },
    {
        "id": 4,
        "title": "middle post",
        "excerpt": "contents to post",
        "content": "contents to post"
    },
    {
        "id": 1,
        "title": "Hello world!",
        "excerpt": "Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!",
        "content": "Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!"
    }
]

AngularJS

//Create main module
var module = angular.module('module', [''])

//Services

module.factory('posts', function($http) {
  return {
      getAsync: function(callback) {
          $http.get('/wp-content/themes/ajax/ajax.php').success(callback);
      }
  };
});

// Set up our mappings between URLs, templates, and controllers
function caseStudyConfig($routeProvider) {
  $routeProvider.
    when('/casestudy/:id', {
      controller: caseCtrl,
      templateUrl: '/wp-content/themes/templates/casestudy.php'
    }).
    otherwise({
      redirectTo: '/'
    });
}

// Set up our route so the service can find it
module.config(caseStudyConfig);

//Controllers
function homeCtrl (posts, $scope) {
  posts.getAsync(function(data) {
       $scope.content = data;
  });
}

function caseCtrl (posts, $scope, $routeParams) {
  posts.getAsync(function(data) {
       $scope.content = data[$routeParams.id];
  });
}
4

1 に答える 1