Solved

Angular JS directive that takes a javascript object that has a array of objects in it and loops through and displays them

Posted on 2014-12-22
4
81 Views
Last Modified: 2015-02-20
Angular JS directive that takes a javascript object that has a array of objects in it and loops through and displays them and provides a template to them.
0
Comment
Question by:cbrune
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40514346
Test page : http://jsfiddle.net/m2zufaog/

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <ul>
            <li ng-repeat="person in persons">{{person.lastname}}, {{person.firstname}}</li>
        </ul>
    </div>
</div>

Open in new window


var myApp = angular.module("myApp", []);
var myCtrl = myApp.controller("myCtrl", ["$scope", function($scope) {
    var array_of_object = [
        {firstname:"Alfred", lastname:"Hitchcock"},
        {firstname:"Emile", lastname:"Zola"}
    ];
    $scope.persons = array_of_object;
}]);

Open in new window

0
 
LVL 22

Expert Comment

by:ambience
ID: 40514649
http://jsfiddle.net/naxL8LvL/7/ is the directive way of doing it, though I personally dont quite like the idea of hardcoding templates inside JS or even using a templateUri.

<div ng-app="myApp">
    <div>
        <div data-mylist data-entities="[
        {firstname:'Alfred', lastname:'Hitchcock'},
        {firstname:'Emile', lastname:'Zola'}
    ]"></div>
    </div>
</div>

Open in new window


var myApp = angular.module("myApp", [])
    .directive("mylist", ['$log', function ($log) {
    return {
        restrict: "ECMA",
        replace: false,
        transclude: false,
        template: "<ul><li ng-repeat='e in entities'>{{e.lastname}}</li></ul>",
        scope: {
            'entities': '='
        }
    }
}]);

Open in new window

0
 

Author Comment

by:cbrune
ID: 40514966
how would i add jquery logic to display this under the element as a popup?
0
 
LVL 22

Accepted Solution

by:
ambience earned 500 total points
ID: 40516165
You should open a separate question for that, also because thats in itself a vast topic of discussion.

For one, a directive allows you to attach a controller and add logic there, however, you should really think in terms of data-binding and let ANGJS control most aspects of presentation. Trying to squeeze in the legacy jQuery way of imperative programming is often avoidable by the use of data-binding and directives like ng-show, ng-hide etc.

Good reads for you

The Common Pitfalls section here: https://docs.angularjs.org/misc/faq

:: Competing site link removed - Gary ::
0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question