angularjs-ng-repeat 相关问题

`ngRepeat`指令从集合中为每个项实例化一次模板。每个模板实例都有自己的作用域，其中给定的循环变量设置为当前集合项，并且`$ index`设置为项索引或键。

AngularJs-通过检查标题名称填充表

我有两个对象，一个包含选定的记录，另一个包含选定的字段。现在，我需要通过检查列标题名称或值来动态填充表。我指的是填充...

javascript angularjs html-table angularjs-ng-repeat javascript-objects

回答 1 投票 0

制作一个带有ng-repeat的列表，以“自定义类别”（AngularJS）分隔]]

我需要创建一个列表，将人们输入到列表中的值，然后将它们按类别分开显示，唯一的问题是我不知道他们将为每个元素使用哪个类别，...] >

javascript angularjs angularjs-ng-repeat

回答 1 投票 0

使用ng-repeat过滤列表

我有一个如下列表$ scope.arrayList = [{“ name”：“ test1”，“ age”：2}，{“ name”：“ test2”，“ age”：4}，{“ name” ：“” test3“，” age“：2}，{” name“：” test1“，” age“：4}]最初在程序...

javascript angularjs filter angularjs-ng-repeat

回答 4 投票 0

带有AngularJs的可拆分表列

我正在尝试对从JSON源填充的数据表进行排序。我的代码如下：HTML： [[[[]]]]]]]] 更新的jsfiddle：http://jsfiddle.net/gweur/ sza是正确的，您确实忘记了$ scope.sort对象，但是您在ng-repeat中也缺少orderBy过滤器 |orderBy:sort.column:sort.descending 此外，您需要将列名显式传递给changeSorting（）函数，例如 ng-click="changeSorting('text')" 不确定是否可以使用其他方法。最后，ng-click是您所使用的AngularJS版本的正确语法。另一个使表格可排序的很好例子 http://jsfiddle.net/vojtajina/js64b/14/ <th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th> scope.changeSorting = function(column) { var sort = scope.sort; if (sort.column == column) { sort.descending = !sort.descending; } else { sort.column = column; sort.descending = false; } }; 这是我的解决方案。我还将整个内容包装到一个指令中。唯一的依赖项是UI.Bootstrap.pagination，它在分页方面做得很好。这里是plunker 这里是github source code. 或者您可以将#ngTasty用作简单的表指令。github的：https://github.com/Zizzamia/ng-tastydocs：http://zizzamia.com/ng-tasty/directive/table 我认为您用于AngularJS的一些样板代码，特别是设置您的Controller和Factory，可能有语法错误。这里是数据工作的示例，并在表列排序方法上进行了扩展。由于AngularJS擅长处理javascript数据结构以在HTML中显示，因此您可以重新排列内存中的javascript数组，而AngularJS会进行更改。此示例允许单击表的标题，这将触发基于该列数据类型的排序。如果已在该列上对其进行了排序，则它将对该列进行反向排序。类型检测是通过提供的isNumeric（）函数和一个两项小的调整来完成的：已添加检查是否以'＃'符号作为标题输入，并在toggleSort方法中按数字排序。用户可以根据需要轻松删除它。当toggleSort尝试按字母顺序排序时，如果它捕获到TypeError，则切换为按数字排序。 var myApp = angular.module("myApp", []); myApp.factory("Purchases", function() { var Purchases = {}; Purchases.data = [{ date: "10/05/2012", text: "1 Lorem ipsum dolor sit amet ipsum dolor", price: "£123.45", availability: "1 Available until 10th Dec 2013" }, { date: "24/05/2012", text: "2 Lorem ipsum dolor sit amet ipsum dolor", price: "£234.56", availability: "2 Available until 10th Dec 2013" }, { date: "20/05/2012", text: "3 Lorem ipsum dolor sit amet ipsum dolor", price: "£345.67", availability: "3 Available until 10th Dec 2013" }]; return Purchases; }); myApp.controller("PurchasesCtrl", function($scope, Purchases) { $scope.purchases = Purchases.data; // Dynamically get the entry headers to use with displaying the nested data via header-key lookups // Assumes all lines contain same key-text data $scope.purchasesHeaderKeys = []; // Contains only the key-data, not the values for (var key in $scope.purchases[0]) { if ($scope.purchases[0].hasOwnProperty(key)) { $scope.purchasesHeaderKeys.push(key); } } /** * Determine if the input value is a number or not. * @param n The input value to be checked for numeric status. * @returns true if parameter is numeric, or false otherwise. * * This method uses the following evaluations to determine if input is a numeric: * * (5); // true * ('123'); // true * ('123abc'); // false * ('q345'); // false * (null); // false * (""); // false * ([]); // false * (' '); // false * (true); // false * (false); // false * (undefined); // false * (new String('')); // false * * @author C.D. (modified by) * @original https://stackoverflow.com/a/1421988/10930451 * */ function isNumeric(n) { if (!isNaN(parseFloat(n)) && !isNaN(n - 0) && n !== null && n !== "") { return true; } return false; } /** * Column Sort Method (generic). Sort based on target column header or reverse sort if already selected on that. * @param dataSource The array of JSON data to be sorted * @param headers The array of JSON object-keys (table column headers) to be referenced * @param index The target JSON object-key to sort the table columns based upon * * @author C.D. */ $scope.lastSortIndex = 0; $scope.changeSorting = function(dataSource, headers, index) { if ($scope.lastSortIndex === index) { dataSource.reverse(); } else { var key = headers[index]; if (key === "#" || isNumeric(dataSource[key])) { // Compare as numeric or on '#' sign dataSource.sort((a, b) => parseFloat(a[key]) - parseFloat(b[key])); } else // Compare as Strings { try { // Attempt to sort as Strings dataSource.sort((a, b) => a[key].localeCompare(b[key])); } catch (error) { if (error.name === 'TypeError') { // Catch type error, actually sort as Numeric dataSource.sort((a, b) => parseFloat(a[key]) - parseFloat(b[key])); } } } $scope.lastSortIndex = index; $scope.reverseSorted = false; } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>AngularJS - Hello World</title> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="PurchasesCtrl"> <div class="container"> <table class="table table-hover table-sm"> <thead> <tr> <th ng-repeat="header in purchasesHeaderKeys"> <a ng-click="changeSorting(purchases, purchasesHeaderKeys, $index)">{{ header }}</a> </th> </tr> </thead> <tbody>  <tr ng-repeat="row in purchases" > <td ng-repeat="key in purchasesHeaderKeys"> {{row[key]}} </td> </tr> </tbody> </table> </div> </body> </html> 我整理了一份工作Plunker example进行了演示。只需单击标题，它们就会对内存中的数组进行排序，AngularJS将在那里获取更改并刷新DOM的该部分。

angularjs angularjs-ng-repeat

回答 5 投票 9

我可以在ng-repeat中使用ng-switch吗？

我有一个名为$ scope.sectionList的数组：0：{id：“ 1”，section_name：“关于我（详细）”}} 1：1：{id：“ 2”，section_name：“关于我（单个单词） “} 2：2：{id：” 3“，section_name：”我的怪异一面（在...

angularjs angularjs-ng-repeat angularjs-ng-switch

回答 1 投票 0

我如何在AngularJS中为对象列表重复html？

[我在angularjs中有一个对象列表，并在其中填充了一些html，如下所示，我有一个包含项的列表，例如，文本将显示在列表中，例如Item1，Item2，Item3，现在出现一个...

javascript html angularjs angularjs-ng-repeat

回答 3 投票 1

超过50,000条记录将ng-repeat加载到angularjs的下拉列表中

我使用ng-repeat在下拉列表中显示了100条记录，速度更快。但是，我必须在下拉列表中使用ng-repeat来获取50,000条以上的记录，而获取应用程序已挂起，而不是...