Javascript 无法使用角度重复显示阵列_Javascript_Angularjs_Angularjs Ng Repeat

Javascript 无法使用角度重复显示阵列

javascript angularjs

Javascript 无法使用角度重复显示阵列,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,我正在玩angularjs，我正在尝试建立一个菜单树。在我当前的示例中，ng repeat不起作用，{{folder.name}}不显示文件夹数组，该数组已实例化，因此数组中至少有一个文件夹对象。有什么想法吗以下是指向plunker的链接，其中包含输出：我的角度代码： var treeApp = angular.module("treeApp", []) .controller("treeController", ["$scope", function($scope) { var defa

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

以下是指向plunker的链接，其中包含输出：

我的角度代码：

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>


节点名称：

树：
添加


去除


{{folder.name}

更改此选项：

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

为此：

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

在第一个示例中，

name

只是一个变量，而不是文件夹的属性

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

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

Javascript中的数组如下所示：

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

我看到了几个问题。首先，Dalorzo是正确的，您需要使用以下命令将name变量绑定到实际函数：

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

此外，在重复过程中，您正在调用菜单中的

文件夹，该文件夹应映射到文件夹.name
，而不是文件夹.name
。在本例中为文件夹！=文件夹
最后，您要将事件绑定到ngclick中的菜单对象，因此您需要在JS中绑定它们，如下所示：
$scope.menu.add = function() { } 
$scope.menu.remove = function() { }

这就是我目前所看到的一切，所以这应该是可行的。
好的，谢谢！第一次使用Javascript，所以仍然习惯语法。这就成功了！谢谢，我假设是因为文件夹被用作复数，我只是想同时表示一个文件夹，而不是所有的“文件夹”。非常感谢。如果您想这样做，您应该执行菜单中的文件夹。