3

Angular、Ninja、HTML5、および Javascript を使用して Web を開発しています。私の問題は次のとおりです。プロジェクトのリストを HTML にレンダリングする忍者コントローラー (ProjectController) があります。このリストを 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** ;
   });

})();

それは可能ですか??よろしくお願いします！

4

1 に答える 1

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

})();
于 2015-07-03T10:53:22.603 に答える