在列表中选择一个元素并将其传递给控制器

时间:2017-05-24 08:54:18

标签: angularjs rest jhipster

我正在开发一个带有AngularJS前端的JHispter项目和一个带有mongodb数据库的Java后端。

在前面,我做了一个代码,以便从列表中选择一个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,它通过aggregateByCodeBudget方法,该方法在Java后端具有等价物,以便根据vm.idcode(预算代码id)检索信息。

(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

state.js文件,其中我将HTML文件,控制器和控制器作为表示法:

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

清晰度-资源affectation.service.js

这里的service.js文件。我正在研究这种方法&#39; aggregateByCodeBudget&#39;。您可以找到允许使用Java后端代码进行映射的url fiel。

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

实际上,当我在控制器中放置警报(vm.idcode)时,它会正确显示,但在函数aggregateByCodeBudget中不会将其作为参数考虑。

你能告诉我,我做的事情是错的吗?我可以将参数vm.idcode放在&#34;函数之前(读数)&#34;参数β

也许,还有另一种方法可以做到。

我添加了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层: 在这个类中,您可以使用@GetMapping注释找到AngularJS部件的映射。

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

提前致谢

1 个答案:

答案 0 :(得分:0)

我对$resource没有多少经验,但我看到的示例通常会传递一个参数名为对象的对象。像这样:

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

在您的情况下,您可能希望将$resource代码更改为仅使用:id,因为我在那里看到了:id:idcode