gpt4 book ai didi

javascript - 基于 REST 响应的动态 HTML 部分

转载 作者:行者123 更新时间:2023-12-01 03:50:19 25 4
gpt4 key购买 nike

我正在使用 Angular JS 前端和基于 REST 的 API 后端构建一个应用程序,为 MySQL 数据库提供数据。从前端到后端进行 REST 调用以填充或检索数据库中的数据。我想向我的 Angular JS 前端主页添加一个下拉选择框。我希望选择触发对数据库的 REST 调用,检索特定值并使该值成为动态加载的 html 部分的一部分。

例如,下拉菜单将选择汽车型号(丰田花冠、本田雅阁等)。当您选择该型号时, Controller 将对相应的表进行 REST 调用以获取该车的其余信息(MPG、尺寸、重量等)完成此操作后,它将在页面上加载部分 HTML,该页面是 HTML 模板文件,但包含动态内容。因此加载的页面将是/#/carInfo?toyotaCorolla。将加载模板部分 html 文件,然后模板上的表将使用来自该 REST 调用的响应进行填充。因此,我基本上会为该页面提供一个模板,但它会根据所选内容调用该页面的新版本。

我正在脑子里思考这个问题,但我没有携带应用程序代码。这个问题不是针对实际的代码解决方案,而是针对某人编写一些伪代码或向我指出与此类似的在线演示/示例......如果可能的话。我正在自己进行搜索,但我可能正在寻找错误的术语来完成此任务。对此的任何指示或帮助将不胜感激。

更新:现在我回到家了,这是我遇到问题的代码片段。

<ul class="nav navbar-nav">
<li><a href="#/home" class="mdi-action-home"></a></li>
<li class="dropdown">
<a href="javascript:void(0)" data-target="#" class="dropdown-toggle" data-toggle="dropdown">
Select a car...
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li ng-model="selectedCar.value" ng-repeat="x.car for x in cars"
ng-change="selectedCarChanged()"></li>
</ul>
</li>
</ul>

这没有正确填充。我有相同的 ng 代码 <select>使用 ng-options 而不是 ng-repeat 实现。我希望这将是一个简单的转换,但使用列表的 CSS 版本不起作用。

最佳答案

请找到下面的代码片段。希望这会有所帮助

汽车列表.html

<div ng-controller="carListController">
<select ng-model="selectedCar" ng-change="onSelectCar(selectedCar)">
<option ng-repeat="car in cars">{{car}}</option>
</select>
</div>

carListController.js

app.controller('carListController', function($scope, $location) {
$scope.carList = ['Honda', 'Toyota', 'Suzuki', 'Hyundai'];
$scope.onSelectCar = function(car) {
$location.path('#/carInfo').search({carInfo: car});
}
});

carInfo.html

<div class="carDetails">
<span>Car Name: {{car.name}}</span>
<span>Car Model: {{car.model}}</span>
<span>Car Year: {{car.year}}</span>
<span>Car Size: {{car.size}}</span>
</div>

carInfoDetailsController.js

app.controller('carInfoController', function($scope, $location, $http) {
$scope.car = {};
$scope.init= function() {
$http.get('url/' + $location.search('carInfo'), function(response) {
$scope.car = response;
});
};

$scope.init();
});

appConfig.js

app.config(function($routeProvider){
$routeProvider.when('/carInfo'{
templateUrl: "carInfo.html",
controller: "carInfoController"
});
});

关于javascript - 基于 REST 响应的动态 HTML 部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43283949/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com