リスト内の要素を選択してコントローラに渡します

Question

私は、AngularJSフロントエンドとJavaバックエンドとmongodbデータベースを持つJHispterプロジェクトに取り組んでいます。

フロントでは、リストからIDを選択してコントローラに渡して、IDを考慮してREST APIリクエストを呼び出すようにするコードを作成しました。ここでは、コード・budget.html

、HTMLのコード：

<div> 
    <div class="form-group"> 
     <label for="listCodeBudget"> Choose a budget code: </label><br> 
     <select name="codeBudget" ng-change="vm.updateBudget()" ng-model="vm.idcode"> 
      <option value="P24DRR000">Support, Realisation and Maintenance</option> 
      <option value="P24DRPIL00">Piloting DSI structure</option> 
     </select> 
    </div> 
    <nvd3 options='vm.optionsBudget' data='vm.dataResume'></nvd3> 
</div> 

コード-budget.controller.jsここ

、私がやったコントローラHTMLコードにバインドされたメソッドvm.update。私はグラフを作成するためにAngular-nvd3ライブラリを使用しています。チャートを作成するためのコードはそれほど重要ではありませんので、すべてのコードを記述しませんでした。ここで重要なのは、vm.idcode（予算コードID）に従って情報を取得するために、Javaのバックエンドに相当するaggregateByCodeBudgetメソッドを通過するvm.idcodeです。

(function() { 
    'use strict'; 

    angular 
     .module('dashboardApp') 
     .controller('CodeBudgetController', CodeBudgetController); 

    CodeBudgetController.$inject = ['$timeout', '$scope', '$stateParams', 'DataUtils', 'ClarityResourceAffectation']; 

    function CodeBudgetController ($timeout, $scope, $stateParams, DataUtils, ClarityResourceAffectation) { 
     var vm = this; 
     vm.byteSize = DataUtils.byteSize; 
     vm.openFile = DataUtils.openFile; 

     $timeout(function(){ 
      angular.element('.form-group:eq(1)>input').focus(); 
     }); 

     vm.updateBudget = function() 
     { 
      ClarityResourceAffectation.aggregateByCodeBudget(vm.idcode, function(readings) { 
        alert(vm.idcode); 
       var dataBudget; 
       dataBudget = []; 

       readings.forEach(function (item) { 
        dataBudget.push({ 
         //some code 
        }); 
       }); 

       vm.optionsBudget = { 
        //some code 
       }; 

       vm.dataBudget = [{ 
        //some code 
       }]; 
      }); 
     } 
    } 
})(); 

明瞭-資源affectation.state.js

私は表記としてHTMLファイル、コントローラおよびコントローラを置くstate.jsファイル：

(function() { 
    'use strict'; 

    angular 
     .module('dashboardApp') 
     .config(stateConfig); 

    stateConfig.$inject = ['$stateProvider']; 

    function stateConfig($stateProvider) { 
     $stateProvider 
.state('code-budget', { 
     parent: 'entity', 
      url: '/code-budget', 
      data: { 
       authorities: ['ROLE_USER'], 
       pageTitle: 'dashboardApp.clarityResourceAffectation.home.title' 
      }, 
      views: { 
       'content@': { 
        templateUrl: 'app/entities/code-budget.html', 
        controller: 'CodeBudgetController', 
        controllerAs: 'vm' 
       } 
      }, 
      resolve: { 
       translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate,$translatePartialLoader) { 
        $translatePartialLoader.addPart('clarityResourceAffectation'); 
        return $translate.refresh(); 
       }] 
      } 
     }); 
    } 
})(); 

clearity-resource-affectation.service.js

ここにservice.jsファイルがあります。私はこのメソッド 'aggregateByCodeBudget'に取り組んでいます。 Javaのバックエンドコードを使用してマッピングを実行できるurl fielが見つかります。私は、コントローラに警告（vm.idcode）を入れたときに

(function() { 
    'use strict'; 
    angular 
     .module('dashboardApp') 
     .factory('ClarityResourceAffectation', ClarityResourceAffectation); 

    ClarityResourceAffectation.$inject = ['$resource']; 

    function ClarityResourceAffectation ($resource) { 
     var resourceUrl = 'clarity/' + 'api/clarity-resource-affectations/:id'; 

     return $resource(resourceUrl, {}, { 
      'aggregateByCodeBudget': { 
       method: 'GET', 
       isArray: true, 
       url: 'clarity/api/clarity-resource-affectations/ligne-budgetaire/:idcode' 
      } 
     }); 
    } 
})(); 

実は、それが正しく表示されますが、それをパラメータとして関数aggregateByCodeBudgetでは考慮されていません。

私が行ったことが間違っていると教えてもらえますか？パラメータvm.idcodeを "function（readings）"パラメータの直前に置くことはできますか？

おそらく、これを行う別の方法があります。

問題をよりよく理解できるように、Javaバックエンドのメソッドを追加します。問題について必要なものだけを置くために、Javaのバックエンドクラスを少し簡略化しました。

リポジトリ層：

public class ClarityResourceAffectationRepositoryImpl implements ClarityResourceAffectationRepositoryCustom { 
    @Autowired 
    MongoTemplate mongoTemplate; 

    @Override 
     public List<ClarityResourceAffectationReport> aggregateByCodeBudget(String codeBudget) { 
      Aggregation aggregation = newAggregation(match(Criteria.where("codeBudgetaireProjet").is(codeBudget).and("mois").ne(null).and("annee").is(2017)), 
        group("mois", "annee").sum("consoJh").as("totalConsoJh").sum("rafJh").as("totalRafJh"), 
        sort(Sort.Direction.ASC, previousOperation(), "annee", "mois")); 

      AggregationResults groupResults = mongoTemplate.aggregate(aggregation, ClarityResourceAffectation.class, 
        ClarityResourceAffectationReport.class); 
      List<ClarityResourceAffectationReport> clarityResourceAffectationReports = groupResults.getMappedResults(); 

      return clarityResourceAffectationReports; 
     } 
} 

サービス層：

@Service 
public class ClarityResourceAffectationServiceImpl implements ClarityResourceAffectationService{ 
    @Override 
     public List<ClarityResourceAffectationReport> aggregateByCodeBudget(String codeBudget) { 
      log.debug("Request to aggregateByCodeBudget : {}", codeBudget); 
      List<ClarityResourceAffectationReport> result = clarityResourceAffectationRepository 
        .aggregateByCodeBudget(codeBudget); 

      return result; 
     } 
} 

REST層：このクラスで 、あなたはAngularJSの部分とのマッピングを見つけることができます@GetMappingアノテーションを使用します。事前

Answer 1

で

/** 
* REST controller for managing ClarityResourceAffectation. 
*/ 
@RestController 
@RequestMapping("/api") 
public class ClarityResourceAffectationResource { 
    @RestController 
    @RequestMapping("/api") 
    public class ClarityResourceAffectationResource { 
    @GetMapping("/clarity-resource-affectations/ligne-budgetaire/{idcode}") 
     @Timed 
     public ResponseEntity<List<ClarityResourceAffectationReport>> aggregateByCodeBudget(@PathVariable String idcode) { 
      log.debug("REST request to get aggregateByCodeBudget : {}", idcode); 
      List<ClarityResourceAffectationReport> result = clarityResourceAffectationService.aggregateByCodeBudget(idcode); 
      return new ResponseEntity<>(result, HttpStatus.OK); 
     } 
    } 
} 

おかげで私は$resourceで多くの経験を持っていないが、私が見るの例は、通常、プロパティとしてパラメータ名を持つオブジェクトを渡します。このような何か：あなたは、私が:id、そこ:idcodeの両方を参照してくださいので、ちょうど、:idを使用するように$resourceコードを変更することもできますあなたの場合は

ClarityResourceAffectation.aggregateByCodeBudget({ id: vm.idcode }, function() { ... }); 

。