Getting rendering html from angular controller

Question

I am developing a web with Angular, Ninja, HTML5 and Javascript. My problem is the following: I have a Ninja controller (ProjectController) where I render a list of projects to the HTML. I would like to show this list with the names of the projects with Angular. All the examples I have seeing about this, they made the list manually like this:

(function() {
  var app = angular.module('projectStore', []);

  app.controller('ProjectController', function(){
  this.projects = gems ;
  });

 var gems  = [
  { name: 'Azurite' },
  { name: 'Bloodstone' },
  { name: 'Zircon'}
 ];
})();

This is my code:

ProjectController.java

public Result getList(final FlashScope flashScope, final Session rawSession, final ProjectData registerRequest) {

    log.info("getting project List");

    List<Record1<String>> list = jCtx.jooq().select(PROJECT.PROJECT_NAME).from(PROJECT).fetch();        

    return Results.html().template("/views/ProjectController/projects.ftl.html").render("projects", list.toString());
}

rendered HTML projects.ftl.html

<#import "../layout/defaultLayout.ftl.html" as layout> 
<@layout.myLayout "Home page">    

<form name ="test" action="/projects" method="post" ng-app="projectStore">
<table id = "table_projects_header">
<tr>
<td>Projects</td>
<td style="padding-right:10px; padding-left:40px"> <input type="button" value=" + " onclick="addRow('table_projects')" /> </td>
<td> <input type="button" value=" - " /> </td>
</tr>
<tr id = "table_projects_list">
</tr>
</table>

<input type="submit" value="Add Project"/>

<div ng-controller="ProjectController as controller">
 <div class="project row" ng-repeat="project in controller.projects">
   <h3>
     {{project}}
   </h3>
</div>
</div>

</form>

</@layout.myLayout>

And I would like to do something like this:

app.js

(function() {
   var app = angular.module('projectStore', []);

   app.controller('ProjectController',function(){
    this.projects = **get projects from rendered html** ;
   });

})();

Is that possible??Thank you in advance!

you can get values from html using getElementById of javascript — Shubham Nigam
– Shubham Nigam, Commented Jul 3, 2015 at 10:23
I tried like this: app.controller('ProjectController',function(){ this.projects = document.getElementById("projects"); alert(this.projects); }); and the alert is null :( — IrApp
– IrApp, Commented Jul 3, 2015 at 10:32
show me you rendered Html then I will tell you how you can get values using javascript — Shubham Nigam
– Shubham Nigam, Commented Jul 3, 2015 at 10:34

Shubham Nigam · Accepted Answer · 2015-07-03 11:01:16Z

HTML

<form name ="test" action="/projects" method="post" ng-app="projectStore">
    <table id = "table_projects_header">
    <tr>
    <td>Projects</td>
    <td style="padding-right:10px; padding-left:40px"> <input type="button" value=" + " onclick="addRow('table_projects')" /> </td>
    <td> <input type="button" value=" - " /> </td>
    </tr>
    <tr id = "table_projects_list" class="renderValues">
    </tr>
    </table>

    <input type="submit" value="Add Project"/>

    <div ng-controller="ProjectController as controller">
     <div class="project row" ng-repeat="project in controller.projects">
       <h3>
         {{project}}
       </h3>
    </div>
    </div>

    </form>

You can do like is:

(function() {
   var app = angular.module('projectStore', []);

   app.controller('ProjectController',function(){
   this.projects=[];
  //javascript way
  var elements = document.getElementsByClassName('renderValues');
 for (var index in elements)
  {
   var element = elements[index];
   this.projects.push(element.innerHTML);
  }
  //jQuery way
  /* var elements = document.getElementsByClassName('');
   $('.renderValues').each(function(){
   this.projects.push($(this).text());
   });*/
   });

})();

Collectives™ on Stack Overflow

Getting rendering html from angular controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related