Question

我正在使用IONIC框架和Angular JS构建应用程序，我正在使用离子释放的Tinder卡功能（http://ionicframework.com/blog/tinder-for-x/）。我试图从JSON文件中读取并使用此json文件作为我的数组的存储。我怎么能这样做，下面是我的正常数组代码

//Controller for Cards
angular.module('Pinder').controller('CardsCtrl', function($scope, TDCardDelegate) {
console.log('CARDS CTRL');

//Array of Cards - this should be moved to a service file.
var cardTypes = [
 {id: 1, title: "Frank", image: 'img/Frank.png', desc:"This will be card Description", done: false },
 {id: 2, title: "John Lewis", image: 'img/JohnLewis.png', desc:"This will be card Description", done: true },
 {id: 3, title: "Generali", image: 'img/Generali.png', desc:"This will be card Description", done: true },
];

//Calls CardTypes array into 'cards'
$scope.cards = Array.prototype.slice.call(cardTypes, 0);

$scope.cardDestroyed = function(index) {
  $scope.cards.splice(index, 1);
};

//Randomly adds a new card 
$scope.addCard = function() {
  var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
  newCard.id = Math.random();
  $scope.cards.push(angular.extend({}, newCard));
 }
})

//Controller for swipe interface of the card.
.controller('CardCtrl', function($scope, TDCardDelegate) {

//Card swipe left function
 $scope.cardSwipedLeft = function(index) {
  console.log('LEFT SWIPE');
 $scope.addCard();
};

//Card swipe right function
$scope.cardSwipedRight = function(index) {
  console.log('RIGHT SWIPE');
  $scope.cards[index].done = true;
  $scope.addCard();
 };
})

这是我的代码试图从json文件中读取

//Controller for Cards
angular.module('Pinder').controller('CardsCtrl', function($scope, TDCardDelegate, $http) {
console.log('CARDS CTRL');

$scope.cards = [];
$http.get('../cards.json', function(cardTypes){
    //Calls CardTypes array into 'cards'
    $scope.cards = Array.prototype.slice.call(cardTypes, 0);
 }, function(error) {
 //handle error here
 });

});

$scope.cardDestroyed = function(index) {
$scope.cards.splice(index, 1);
};

//Randomly adds a new card 
$scope.addCard = function() {
  var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
  newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
 }
})

//Controller for swipe interface of the card.
.controller('CardCtrl', function($scope, TDCardDelegate) {

//Card swipe left function
$scope.cardSwipedLeft = function(index) {
console.log('LEFT SWIPE');
$scope.addCard();
};

//Card swipe right function
$scope.cardSwipedRight = function(index) {
 console.log('RIGHT SWIPE');
 $scope.cards[index].done = true;
 $scope.addCard();
 };
 })

当使用json方法时，我得到错误CardsCtrl不是函数。

Answer 1

语法不正确，我有时会忘记自己使用哪种语法。 $http.get()使用success和error方法返回承诺。

$http.get('../cards.json').success(function(cards){
  console.log(cards);
}).error(function(error) {
  console.log(error);
});

Answer 2

感谢大家的帮助，我找到了我在这篇文章中寻找的答案

AngularJS: factory $http.get JSON file

Angular JS，来自json的离子读数

2 个答案: