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

时间:2018-03-03 14:25:52

标签: javascript java html

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

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

感谢您的支持,无需为寻找方向的人提供支持。

1 个答案:

答案 0 :(得分:0)

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

然后使用select&amp; ng-options构建选择框&amp;向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>