使用下拉列表填充文本区域字段答案

【问题标题】：Using dropdown to populate text area fields使用下拉列表填充文本区域字段
【发布时间】：2018-03-03 22:59:03
【问题描述】：

我对前端开发比较陌生，我无法找到我想要实现的目标的答案。

我的 html 中有一个下拉列表，由来自使用 ng-repeat 的 java rest 端点的字符串值列表填充。

<select id='optionDisplay' name='templateOption'>
    <option ng-repeat="t in templates">{{ t }}</option>
</select>

（列表由地图的键填充，我现在需要地图的值来获取我需要的信息）例如

Map<String, Template> getAllTemplateMap = DBUtil.getInstance().getAllTemplateMap();

List<Template> tempList = new ArrayList<>();
    for (Template template : getAllTemplateMap.values()) {
        tempList.add(template);
    }

现在我在下拉列表下方有几个文本区域，我希望这些区域填充与从下拉列表中选择的选项相关联的值，该选项将派生自地图的值（模板）。

例如，字段来自模板，模板具有 .getName()、.getDescription() 等方法。

我必须为每个值创建一个休息端点吗？我将如何在 javascript 控制器中实现这一点来填充文本框？？

控制器代码 -

app.controller('TempCtrl', function($scope, $http,$location) {

$http.get("http://localhost:8080/templatepanel/templates")
     .then(function(response) {
         $scope.templates = response.data;  
});


$http.get("http://localhost:8080/templatepanel/appname")
     .then(function(response) {
        $scope.appName = response.data;
});

console.log('getting template list');
});

感谢大家的反对，无需成为寻找方向的人。

【问题讨论】：

在您对 Java 控制器/RestController（服务器端）进行 Web 服务调用（AngularJS 代码 - 客户端）的位置显示您的代码。
@MAC 添加了控制器，顶部函数获取列表，第二个函数还没有做任何事情。

标签： javascript java html

【解决方案1】：

这是一个如何完成的简单示例。这里$scope.optionList 是您从中间层获得的值，您可以通过 http 请求获得。

然后使用select & ng-options 构建选择框并将函数添加到ng-change。因此，从select（在您的情况下为下拉）更改值时，将调用与ng-change 关联的函数。

在这个函数中，用选中的值更新输入框的模型。

angular.module('testApp', []).controller('TestController', ['$scope', function($scope) {


  $scope.optionList = [{
    value: 'value1',
    name: 'name1'
  }, {
    value: 'value2',
    name: 'name2'
  }]
  $scope.updateTextBox = function(val) {
    $scope.inputField = $scope.unit

  }


}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp">
  <div ng-controller="TestController">
    <select ng-model="unit" ng-options="opt.value as opt.name for opt in optionList track by opt.value" ng-change="updateTextBox()">
        </select>

    <input ng-model="inputField"> </div>


</div>

【讨论】：