Question

我对AngularJS很新。

我给自己做了一个小项目来创建一个本地商家列表，然后是“喜欢”每个商家的能力 - 每次点击'喜欢'div时，喜欢的数量会增加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

它似乎是$ scope范围内的$ scope或类似的东西。

任何提示？非常感谢。

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

您使用的是错误的结构。节点是数组，因此您需要在那里应用索引，而不是节点。 Node是一个包含参数“likes”的对象。此处未定义的项目为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;

对于$ scope内的项，AngularJS $ scope未定义

3 个答案: