Question

我正在使用Angular，Ninja，HTML5和Javascript开发一个网站。我的问题如下：我有一个Ninja控制器（ProjectController），我在其中呈现HTML的项目列表。我想用Angular的项目名称显示这个列表。我看到的所有例子都是他们手动制作的列表：

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

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

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

这是我的代码：

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());
}

呈现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>

我想做这样的事情：

app.js

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

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

})();

这可能吗？提前谢谢你！

Answer 1

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>

你可以这样做：

(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());
   });*/
   });

})();

从角度控制器获取渲染html

1 个答案: