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

Question

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

我的html中有一个下拉列表，填充了一个String值列表，这些值来自使用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');
});

并且感谢您的支持，不需要为寻找方向的人冲洗。

Answer 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>