CODEWITHSUNDEEP
angularjs
fibono
fibono

Reputation: 783

"Rendering" Objects in AngularJS

New to AngularJS here (have used BackboneJS before), and am trying to learn AngularJS. I'm attempting to basically render a bunch of objects with their own div "views." In my controller, I have an array of objects (all objects with same properties) that I would pretty much like to render as sticky-notes. My thought process was to somehow grab the data from each object in the array, and render each as div's (which I could style to look like a sticky-note).

The code I have thus far:

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope', '$http', function ($scope, $http, Note) {
  $scope.notesArray= [];
  $http.get('notes_data.json').success(function(data) { // basically grab all the data from a JSON file
    data.data.forEach(function(obj) {
        $scope.notesArray.push(obj);
    });
  })
}]);

My index.html looks like: 

<!doctype html>
<html>
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

  </head>
  <body>
        <div ng-app="myApp">
            <div ng-controller="MainCtrl">
                Some stuff here
            </div>
        </div>  
  <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Also, it'd be great if someone could comment on how I can represent these objects more effectively (using a factory, service, etc). Thanks!

Upvotes: 0

Views: 1892

Answers (1)

c4k
c4k

Reputation: 4426

Do something like this, with ng-repeat :

<!doctype html>
<html>
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

  </head>
  <body>
        <div ng-app="myApp">
            <div ng-controller="MainCtrl">
                <div class="note" ng-repeat="note in notesArray">
                    <div class="wrapper" ng-class="note.done ? 'done' : 'undone'">
                        <p class="title">{{note.title}}</p>
                        <span class="done">{{note.done}}</span>
                    </div>
                </div>
            </div>
        </div>  
  <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Upvotes: 1

Related Questions