我对前端开发相对较新,我无法找到我想要实现的目标的答案。
我的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');
});
感谢您的支持,无需为寻找方向的人提供支持。
答案 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>