Question

我正在玩angularjs，我正在尝试构建一个菜单树。在我当前的示例中，我的ng-repeat不起作用，{{folder.name}}不显示文件夹数组，这是实例化的，因此数组中至少有一个文件夹对象。有什么想法吗？

以下是带有输出的plunker的链接：http://plnkr.co/edit/j7J9ibpqgt65jdGSsPWu

我的角度代码：

var treeApp = angular.module("treeApp", [])
.controller("treeController", ["$scope", function($scope) {

var defaultName = "Node";

//Node object
function Folder() {
    var name = defaultName;
}

//Node array
$scope.menu = [
    this.folder1 = new Folder()
];

//Adds node to array
$scope.add = function() {
    var newFolder = new folder();
    $scope.menu.push(newFolder);
};

//Removes last node in array
$scope.remove = function() {
    $scope.menu.pop();
};

}])

我的HTML：

<!DOCTYPE html>
<html lang="en" ng-app="treeApp">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="treeController">

<div>
  Name of Nodes: <input type="text" ng-model="defaultName" placeholder="Data">
</div>

<div class="Tree Display">
  <hr/>
  <h2><strong>The Tree:</strong></h2>

  <button ng-click="menu.add()">Add</button>
  <br/>
  <button ng-click="menu.remove()">Remove</button>

  <ul>
    <li ng-repeat="folders in menu">
      {{folder.name}}
    </li>
  </ul>
</div>

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ngTree.js"></script>

</body>

</html>

Answer 1

改变这个：

//Node object
function Folder() {
    var name = defaultName;
}

有了这个：

//Node object
function Folder() {
    this.name = defaultName;
}

在第一个示例中，name只是一个变量，而不是Folder的属性。

此外，我认为此代码无效：

$scope.menu = [
    this.folder1 = new Folder()
];

Javascript中的数组将是这样的：

$scope.menu = [ new Folder(), new Folder() ];

Answer 2

我看到了几个问题。首先，Dalorzo是正确的，你需要将name变量绑定到实际函数：

//Node object
function Folder() {
    this.name = defaultName;
}

另外，在重复播放时，您正在调用folders in menu，而folders.name应该映射到folder.name而不是$scope.menu.add = function() { } $scope.menu.remove = function() { }。在这种情况下文件夹！=文件夹。

最后，您将事件绑定到ngclick中的菜单对象，因此您需要将它们绑定在JS中，如：

{{1}}

这就是我现在所看到的，所以这应该有效。

无法使用Angular ng-repeat显示数组

2 个答案: