"Rendering" Objects in AngularJS

Question

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!

do seperate the ajax into service and call that service..get that data from there and then show it on UI using ng-repeat — Pankaj Parkar
– Pankaj Parkar, Commented Jun 24, 2015 at 22:08

c4k · Accepted Answer · 2015-06-25 09:46:06Z

1

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>

edited Jun 25, 2015 at 9:46

answered Jun 24, 2015 at 23:10

c4k

4,6065 gold badges44 silver badges74 bronze badges

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

2 Comments

fibono Over a year ago

Awesome! It seems that this way would render the notes all the same way. What if you wanted to include logic to render some notes differently from others?

c4k Over a year ago

It depends on which criteria you want to render them differently. If it is related to a value of an attribute, you can use ng-if or ng-class, if you want to display differently even/odd notes, you can read more about ng-repeat here docs.angularjs.org/api/ng/directive/ngRepeat. I edited my question to show you how to set a class in relation to the done status.

Collectives™ on Stack Overflow

"Rendering" Objects in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related