angularjs - AngularJS - 表内行的ng-repeat
问题描述
AngularJS - ng-repeat & $http.get
编辑:尝试使用unique,也没有工作:
<table class="table" ng-controller="fetchData">
<tr ng-repeat="elements in rawData.value">
<th ng-repeat="(key, value) in elements | unique:'key'">
{{key}}
</th>
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
我正在使用 ng-repeat 用外部信息填充表格,但我正在努力填充标题。我找到了一个提取密钥的示例:
<td ng-repeat="(key, element) in elements">
但是,这对我没有帮助,因为我应该只在数据上填充一次,而不是在它旁边。我还尝试添加一个额外的 ng-repeat,但无济于事。
关于 $http.get 和 ODATA-sources - 有没有办法一次用所有可用数据填充表?或者我可以在任何地方阅读哪些令牌被接受(谷歌搜索时没有找到任何信息)?现在我最多只能获得 11 个元素 - 而且我不允许像我目前正在做的那样将令牌添加到 URL。有没有更好的方法来获取数据?任何指针将不胜感激,如果需要其他信息,请告诉我。这是代码:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ODataResources/1.0.25/odataresources.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<script>
const BASE_URL = 'http://services.odata.org/V3/OData/OData.svc/';
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var app = angular.module('getData', []);
app.controller('fetchLinks', function($scope, $http) {
$http.get(BASE_URL)
.then(function(response) {
$scope.rawLinks = response.data;
});
});
app.controller('fetchData', function($scope, $http) {
let dynamicContent = getParameterByName('q');
console.log(BASE_URL+dynamicContent);
$http.get(BASE_URL+dynamicContent)
.then(function(response) {
$scope.rawData = response.data;
});
});
</script>
<body ng-app="getData">
<div class="container main-container">
<div class="row">
<div class="col menu">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul>
<div ng-controller="fetchLinks">
<li class="nav-item" ng-repeat="element in rawLinks.value">
<a class="nav-link" href="?q={{ element.url }}">{{ element.name }}</a>
</li>
</div>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<table class="table" ng-controller="fetchData">
<tr ng-repeat="elements in rawData.value">
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
要重复多行,请使用特殊重复起点和终点:
<table class="table" ng-controller="fetchData">
<tr ng-repeat-start="elements in rawData.value">
<th ng-repeat="(key, value) in elements>
{{key}}
</th>
</tr>
<tr ng-repeat-end>
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
这将重复两行;第一个带键,第二个带值。
您的代码几乎完成了我想要实现的目标,因此我
ng-if="$first"
在该ng-repeat-start
行中添加了一个
如果您的目标是只创建一个标题行,那么这样做更有效:
<table class="table" ng-controller="fetchData">
<tr>
<th ng-repeat="(key, value) in rawData.value[0]">
{{key}}
</th>
</tr>
<tr ng-repeat="elements in rawData.value">
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
这避免了评估多个ng-if
表达式的所有开销。它还假设rawData.value
数组中的每个对象都具有相同的键。
推荐阅读
- facebook - 当用户通过“应用程序和网站”设置从 Facebook 删除我的应用程序并尝试在我的应用程序中重新连接时会发生什么?
- sharepoint-online - 是否可以将值从属性传递到 SPFx 中的 CSS?
- powershell - PowerShell:带有字符串参数的 pwsh -Command/-File 包含要传递给以根路径为值的子进程的参数
- react-hook-form - react-hook-form:如何在 reactstrap CustomInput 中重置标签
- apache-spark - spark 2.4:AQE 是否优先于 spark.sql.shuffle.partitions?
- javascript - 如何设置流响应的标头,以便我可以推断 Node.js 中的下一个 stream.on("data", ()=>{}) 处理程序?
- sql - 在特定日期添加 where 子句
- c++ - Visual Studio Community 2019 x86 与 x64 中 C++ 代码的不同结果
- jasper-reports - JasperReports - 如何打破列表/乐队
- freeswitch - Freeswitch - 启用语音邮件电子邮件通知