AngularJS $ scope undefined для элемента внутри $ scope

Question

Я совершенно новый для AngularJS.

Я дал небольшой проект, чтобы создать список местных предприятий, а затем возможность «понравиться» каждому из них - количество понравившихся увеличивается на 1 каждый раз, когда щелкает «нравится».

Вот мой HTML

<ion-content ng-controller="BusCtrl" ng-init="init()" class="has-header"> 
<div class="list"> 
    <div ng-repeat="item in nodes" class="item"> 
    <b>{{item.node.title}}</b><br> 
    <b>{{item.node.website}}</b><br> 
    <img ng-src="{{ item.node.main_image.src }}"> 
    <div class="engagement"> 
     <p class="likes" ng-click="plusOne($index)">{{item.node.likes}}</p> 
    </div> 
    <span ng-bind-html="item.node.summary"></span> 
    </div> 
</div> 

Вот мой код контроллера

.controller('BusCtrl', function($scope, $http) { 
    $scope.init = function() { 
    $http.get("sample-json/business-directory.json") 
     .success(function(data) { 
      $scope.nodes = data.nodes; 
      $scope.plusOne = function(index) { 
      $scope.nodes.node[index].likes += 1; 
      }; 
      $scope.browse = function(v) { 
      window.open(v, "_system", "location=yes"); 
      }; 
      window.localStorage["nodes"] = JSON.stringify(data.nodes); 
     }) 
     .error(function(data) { 
      console.log("ERROR: " + data); 
      if(window.localStorage["nodes"] !== undefined) { 
      $scope.entries = JSON.parse(window.localStorage["nodes"]); 
      } 
     }); 
    }; 
}) 

Вот некоторые примеры JSON

{ 
"nodes": [ 
    { 
     "node": { 
      "title": "2013 Business Survey", 
      "website": "http://www.portumnachamber.ie", 
      "likes": 0, 
      "main_image": { 
       "src": "http://portumnachamber.com/sites/default/files/styles/main-business-image-teaser/public/LOVEPORTUMNA_FINAL%20LOGO_%20small_3.jpg?itok=L5IE2Du_", 
       "alt": "Portumna Business Survey 2013, What does Portumna Co. Galway need and want" 
      } 

     } 
    }, 
    { 
     "node": { 
      "title": "All Occasions Boutique, Portumna", 
      "website": "http://www.portumnachamber.com", 
      "likes": 0, 
      "main_image": { 
       "src": "http://portumnachamber.com/sites/default/files/styles/main-business-image-teaser/public/all%20occasions%201.jpg?itok=LFvCQIAT", 
       "alt": "Boutique Clothes Shop Portumna county Galway Ireland, All Occasions, Portumna" 
      } 

     } 
    }, 
    { 
     "node": { 
      "title": "Anthony Williams", 
      "website": "http://www.portumnachamber.com", 
      "likes": 0, 
      "main_image": { 
       "src": "http://portumnachamber.com/sites/default/files/styles/main-business-image-teaser/public/default_images/portumna-coc-logo.png?itok=V9G81lx4", 
       "alt": "" 
      } 

     } 
    }, 
] 

}

Я получаю список каждого бизнеса - название, сайт, изображение и номер 0 для симпатичных. Однако, когда я нажимаю на 0, я получаю эту ошибку:

Error: $scope.nodes.node is undefined 

Кажется, что это $ сфера в $ масштаба или что-то подобное.

Любые советы? Большое спасибо.

Answer 1

Я собираюсь предположить, что у вашего источника данных узлов нет другого свойства массива node. В этом случае ваша функция plusOne становится:

$scope.plusOne = function(index) { 
    $scope.nodes[index].node.likes += 1; 
}; 

Вы итерация (ng-repeat) на nodes переменной из вашей сферы, так что вы должны положить indexer на это имущество. $scope.nodes - это ваш массив, а не $scope.nodes.node. За каждый товар от $scope.nodes у вас есть имущество node.

Например, $scope.nodes[0] дает вам первый товар, у которого есть .node.

Answer 2

Вы используете неправильную структуру. Узлы - это массив, поэтому вам нужно применять индекс там, а не к узлу. Узел - это объект, который содержит параметр «любит». Неопределенное пункт здесь был nodes.node[index] не $scope

Чтобы получить доступ к узлу, вы должны написать $scope.nodes[index].node.likes += 1;

Answer 3

По вашему JSON измените

$scope.nodes.node[index].likes += 1; 

в

$scope.nodes[index].node.likes += 1;