CODEWITHSUNDEEP
javascriptangularjs
user1093111
user1093111

Reputation: 1111

Angular not working

I'm new to angular. Just trying to replicate this jsfiddle to play with nodes, but the angular is not working. First, the jsfiddle is confusing my as the application names are not he same. Secondly, it looks like and old version. What am I doing wrong when setting up the application. Is something missing with the templates, or the order of scripts out of place?

<html>
<head>

<script src="https://code.angularjs.org/angular-1.0.0rc8.js"></script>

  <style>
    ul {
      list-style: circle;
  }
  li {
      margin-left: 20px;
  }
  </style>


</head>
<body>
  <script type="text/ng-template"  id="tree_item_renderer.html">
      {{data.name}}
      <button ng-click="add(data)">Add node</button>
      <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
      <ul>
          <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
      </ul>
  </script>

  <ul ng-app="Application" ng-controller="TreeController">
      <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
  </ul>
  <script>
  angular.module("myApp", []).
  controller("TreeController", ['$scope', function($scope) {
      $scope.delete = function(data) {
          data.nodes = [];
      };
      $scope.add = function(data) {
          var post = data.nodes.length + 1;
          var newName = data.name + '-' + post;
          data.nodes.push({name: newName,nodes: []});
      };
      $scope.tree = [{name: "Simon", nodes: []}];
  }]);
  </script>
</body>
</html>

Upvotes: 1

Views: 62

Answers (1)

Benny Johansson
Benny Johansson

Reputation: 771

ng-appshould target a module. Try ng-app="myApp".

Upvotes: 1

Related Questions