使用angularjs在html中的表格数据单元格上显示下拉列表
Posted
技术标签:
【中文标题】使用angularjs在html中的表格数据单元格上显示下拉列表【英文标题】：Display dropdown on table data cell in html using angularjs 【发布时间】：2019-04-10 04:27:28 【问题描述】：我正在尝试根据我的 angularjs 响应填充我的 html 表中的行。我的目标是以下拉格式制作我的表格数据单元格之一。
要求：
下拉列表将包含三个值（A、B 和 C）。 初始值应该是我的获取到的值 angularjs 响应。 下拉列表的其他值应该是响应中未获得的剩余值。详细说明：
我有这个表行：
<tbody>
<tr valign="middle" st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_republish_records" id="row.botMainId">
<td><select class="custom-select" style="margin-left:0px" ng-model="botId" ng-options="choice.name for choice in botIds"></select></td>
<td ng-bind="row.botSet"></td>
<td ng-bind="row.botNumber"></td>
</tr>
</tbody>
而且，我有这种格式的响应数据：
0: botMainId: "A", botSet: "HK64604", botNumber: "786443174705883702", $$hashKey: "object:27"
1: botMainId: "A", botSet: "HK65825", botNumber: "595143174706013402", $$hashKey: "object:28"
2: botMainId: "A", botSet: "HK67383", botNumber: "281943174706142702", $$hashKey: "object:29"
3: botMainId: "B", botSet: "HK72557", botNumber: "922443174706654102", $$hashKey: "object:30"
4: botMainId: "B", botSet: "HK73332", botNumber: "724243174706716502", $$hashKey: "object:31"
5: botMainId: "A", botSet: "HK74025", botNumber: "379943174706764502", $$hashKey: "object:32"
6: botMainId: "A", botSet: "HK74694", botNumber: "825843174706807002", $$hashKey: "object:33"
7: botMainId: "C", botSet: "HK74819", botNumber: "563543174706827202", $$hashKey: "object:34"
8: botMainId: "C", botSet: "HK75964", botNumber: "423643174706902802", $$hashKey: "object:35"
9: botMainId: "B", botSet: "HK76384", botNumber: "678043174706923902", $$hashKey: "object:36"
从该数据来看，第一行、第二行和第三行的下拉菜单应将初始值作为 A，然后将 B、C 作为其他下拉值。
第四行和第五行应将 B 作为初始值，将 C 和 A 作为其他下拉值，依此类推。
现在，我到目前为止尝试过的 js：
$http(
'url' : '/myURL',
'method' : 'POST',
'headers' :
'Content-Type' : 'application/json'
).then(function(response)
console.log(response.data);
var arrayLength = response.data.length;
for (var i = 0; i < arrayLength; i++)
/* console.log(response.data[i].botMainId);*/
var botRuleCode1 = null;
var botRuleCode2 = null;
var botRuleCode3 = null;
if (response.data[i].botMainId == 'A')
botRuleCode1 = 'A';
botRuleCode2 = 'B';
botRuleCode3 = 'C';
else if (response.data[i].botMainId == 'B')
botRuleCode1 = 'B';
botRuleCode2 = 'A';
botRuleCode3 = 'C';
else
botRuleCode1 = 'C';
botRuleCode2 = 'B';
botRuleCode3 = 'A';
$scope.botIds = [
id : botRuleCode1,
name : botRuleCode1
,
id : botRuleCode2,
name : botRuleCode2
,
id : botRuleCode3,
name : botRuleCode3
];
$scope.botId = $scope.botIds[0];
$scope.botData = response.data;
$window.scrollTo(0, 0);
)
此脚本将为所有下拉列表设置for 的最后一个值，为所有行创建一个通用下拉值。
有人可以帮助我如何更改此代码吗？
【问题讨论】：
【参考方案1】：您好，我有一个为此案例创建的示例，但希望对您有所帮助。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window)
$scope.Customers = [
Name: "John Hammond", Country: "United States" ,
Name: "Mudassar Khan", Country: "India" ,
Name: "Suzanne Mathews", Country: "France" ,
Name: "Robert Schidner", Country: "Russia"
];
$scope.GetDetails = function ()
var details = '';
$('[id*=tblCustomers] tr:not(:has(th))').each(function (index, item)
var name = $scope.Customers[index].Name;
var country = $scope.Customers[index].Country;
var selected = $(item).find('[id*=ddlYesNo] option:selected').val()
details += "Name: " + name + "\nCountry: " + country + "\nAction: " + selected + "\n\n";
);
$window.alert(details);
;
);
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table id="tblCustomers" cellpadding="0" cellspacing="0">
<tr>
<th>
Name
</th>
<th>
Country
</th>
<th>
Action
</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>
m.Name
</td>
<td>
m.Country
</td>
<td>
<select id="ddlYesNo">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</tbody>
</table>
<br />
<input type="button" value="Get Details" ng-click="GetDetails()" />
</div>
</body>
</html>【讨论】：
感谢@Xenis 的回答。但是，条件应该是选择下拉菜单。要求是，每当加载 div 时，下拉菜单的默认值应基于获得的响应。 考虑将下拉列表分配给 Country 选项。假设这个数据：John 来自美国，Mudassar 来自印度，Suzanne 再次来自美国，Robert 来自俄罗斯，国家下拉列表应该将美国作为 John 和 Suzanne 的默认值。 （其他值应该是印度和俄罗斯）对于罗伯特，默认值应该是俄罗斯。其他值应该是 USA 和 India。希望我清楚 是的，我明白你的意思。我会努力创造一个更好的前任。【参考方案2】：您的代码的问题是您对repeater 中的每一行都使用相同的ngModel botId。
最好有一个不同的对象来存储每个项目的选择值，这样您就可以在从 API 调用返回数据后立即填充它。这样的事情说明了所描述的方法：
angular.module("myApp", [])
.constant('POSSIBLE_OPTIONS', ['A', 'B', 'C'])
.controller("MyController", ['POSSIBLE_OPTIONS', function (POSSIBLE_OPTIONS)
var ctrl = this;
ctrl.display_republish_records = [
botMainId: "A", botSet: "HK64604", botNumber: "786443174705883702",
botMainId: "A", botSet: "HK65825", botNumber: "595143174706013402",
botMainId: "A", botSet: "HK67383", botNumber: "281943174706142702",
botMainId: "B", botSet: "HK72557", botNumber: "922443174706654102",
botMainId: "B", botSet: "HK73332", botNumber: "724243174706716502",
botMainId: "A", botSet: "HK74025", botNumber: "379943174706764502",
botMainId: "A", botSet: "HK74694", botNumber: "825843174706807002",
botMainId: "C", botSet: "HK74819", botNumber: "563543174706827202",
botMainId: "C", botSet: "HK75964", botNumber: "423643174706902802",
botMainId: "B", botSet: "HK76384", botNumber: "678043174706923902"
];
ctrl.posibbleOptions = getUniqueValuesV2(ctrl.display_republish_records, 'botMainId')
.map(optionsMapper);
ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
.map(optionsMapper);
ctrl.selectionModel = ;
angular.forEach(ctrl.display_republish_records, function (bot)
ctrl.selectionModel[bot.botNumber] = ctrl.posibbleOptions.filter(function (opt)
return opt.id === bot.botMainId;
)[0];
);
function optionsMapper(id)
return
id: id,
name: id
function getUniqueValues(array, prop)
return [...new Set(array.map(item => item[prop]))];
function getUniqueValuesV2(array, prop)
return array.map(function(item)
return item[prop];
).filter(function(item, i, ar)
return ar.indexOf(item) === i;
);
]);pre
max-width: 100%;
word-break: break-word;
white-space: pre-wrap;
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
<hr/>
<table>
<tr valign="middle" st-select-row="row" st-select-mode="multiple"
ng-repeat="row in $ctrl.display_republish_records track by row.botNumber"
ng-attr-id="::row.botMainId-::row.botNumber">
<td>
<select class="custom-select" style="margin-left:0px" ng-model="$ctrl.selectionModel[row.botNumber]"
ng-options="choice.name for choice in $ctrl.posibbleOptions track by choice.id">
<option value="" hidden readonly="" ng-hide="true"></option>
</select>
</td>
<td ng-bind="row.botSet"></td>
<td ng-bind="row.botNumber"></td>
</tr>
</table>
<hr/>
<h3>Debug info:</h3>
<code>
<pre>$ctrl.posibbleOptionsFromConstant</pre>
</code>
<hr/>
<code>
<pre>$ctrl.posibbleOptions</pre>
</code>
<hr/>
<code>
<pre>$ctrl.selectionModel</pre>
</code>
</div>【讨论】：
你应该得到这个赏金的人！但只是一个小小的澄清。如果我的列表只包含 A 和 B 作为 botMainIds。此下拉菜单不会填充选项 C 对吗？怎么带进去？我想你错过了。 即使 A 和 B 是列表中唯一的元素，即使 C 也应该在下拉列表中！ @Mike 嘿，希望这对您有所帮助！我认为要获得所有可能的值——最好的方法——是进行一个 API 调用，该调用将查询 db 以获取所有可能的选项（可能在转到客户端之前被其他一些业务逻辑过滤）。更简单的方法 - 将它作为constant （查看 ctrl.posibbleOptionsFromConstant 是如何填充的）在你的 angularjs 模块中。为了示例的简单性，我避免使用 if/else 填充选项列表的方法。
好人！这就是我所做的。你明白了 :) 非常感谢你的帮助！！
Stanislav.. getUniqueValues 函数。我可以在没有范围运算符的情况下实现这一点吗？【参考方案3】：
这是显示下拉列表的 JS
incidentDataList = [IncidentId:1,Name:'Test',Description:'Test',AssignedUser: 'demo', IncidentStatus: 'Open',IncidentId:1,Name:'Test',Description:'Test',AssignedUser: 'demo', IncidentStatus: 'Resolved'];
$scope.updateStatus = function (incidentData,index)
const headers =
'content-type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET,POST,OPTIONS,DELETE,PUT',
'Access-Control-Allow-Credentials': 'true'
;
$scope.showerror = false;
$scope.alert.error = "";
$scope.showsuccess = false;
$scope.alert.success = "";
incidentData.IncidentStatus = $scope.incidentDataList[index].IncidentStatus;
$http.put('/updateIncident', JSON.stringify(incidentData), 'headers': headers ).then(function (response)
if (response.data)
$scope.showsuccess = true;
$scope.alert.success = "Status " + incidentData.IncidentStatus +" updated successfully ";
$scope.incidentData = ;
, function (response)
if (response.data)
$scope.showerror = true;
$scope.alert.error = "Error while updating " + $scope.incidentData.Name;
);
这是你的 HTML 代码，在列表中写下这个选择代码
<select ng-change="updateStatus(data,$index)" ng-model="incidentDataList[$index].IncidentStatus" class="form-control" ng-options="x for x in IncidentStatusList" aria-describedby="IncidentStatus" placeholder="Incident Status">
【讨论】：
以上是关于使用angularjs在html中的表格数据单元格上显示下拉列表的主要内容，如果未能解决你的问题，请参考以下文章