Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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
Medium Priority
?
104 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
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…

715 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