Failing to Display Array using Angular ng-repeat

Question

I am playing around with angularjs and I am attempting to build a menu tree. In my current example my ng-repeat is not working and {{folder.name}} does not display the array of folders, which is instantiated so there is at least one folder object in the array. Any ideas?

Here is a link to the plunker with the output: http://plnkr.co/edit/j7J9ibpqgt65jdGSsPWu

My angular code:

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();
};

}])

My 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>

Dalorzo · Accepted Answer · 2014-06-04 18:35:17Z

2

Change this:

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

With this:

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

In the first example name is only a variable and not a property of Folder.

Additionally I think this code is invalid:

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

An array in Javascript will be like this:

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

edited Jun 4, 2014 at 18:35

answered Jun 4, 2014 at 18:26

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AKon Over a year ago

OK, thank you! First time working with Javascript so still getting used to the syntax.

Chad · Accepted Answer · 2014-06-04 18:36:58Z

1

There are a couple of issues I see. First, Dalorzo is right that you need to bind the name variable to the actual function with:

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

Also, in your repeat, you're calling folders in menu which should map to folders.name instead of folder.name. In this case folders != folder.

Lastly, you're binding your events to the menu object in your ngclick, so you need to bind them in your JS also like:

$scope.menu.add = function() { } 
$scope.menu.remove = function() { }

That's all I see for now though, so that should work.

answered Jun 4, 2014 at 18:36

Chad

5,4184 gold badges27 silver badges36 bronze badges

2 Comments

AKon Over a year ago

That did the trick! Thank you, I assumed because folders was being used it as plural, and I simply wanted to represent one folder and not all the "folders" at once. Thank you!

Chad Over a year ago

If you want to do that, you should do folder in menu.

Collectives™ on Stack Overflow

Failing to Display Array using Angular ng-repeat

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related