如何通过单击Angularjs ng-repeat items在模式上显示项目
AngularJS是一种流行的前端开发框架，它提供了一种简单而强大的方式来构建动态的Web应用程序。ng-repeat是AngularJS中的一个指令，用于在模板中重复显示一个集合中的项目。
要通过单击AngularJS ng-repeat items在模式上显示项目，可以按照以下步骤进行操作：
- 首先，确保已经引入了AngularJS库文件，并将其添加到你的HTML页面中。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>- 在HTML页面中，使用ng-app指令定义一个AngularJS应用程序，并使用ng-controller指令定义一个控制器。
<div ng-app="myApp" ng-controller="myController">
<button ng-click="showItems()">显示项目</button>
<ul>
<li ng-repeat="item in items" ng-show="show">{{item}}</li>
</ul>
</div>- 在JavaScript代码中，创建一个AngularJS应用程序，并定义一个控制器。
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = ['项目1', '项目2', '项目3'];
$scope.show = false;
$scope.showItems = function() {
$scope.show = !$scope.show;
};
});在上述代码中，我们创建了一个包含三个项目的数组items，并将show设置为false。当点击按钮时，showItems函数会将show的值取反，从而控制项目的显示与隐藏。
这样，当你在浏览器中打开该页面时，你将看到一个按钮和一个空的项目列表。当你点击按钮时，项目列表将根据show的值显示或隐藏。
这是一个简单的示例，展示了如何通过单击AngularJS ng-repeat items在模式上显示项目。根据具体的需求，你可以根据ng-repeat的文档和AngularJS的其他功能进行更复杂的操作和定制。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我正在尝试显示项目列表，当我点击更多链接时，它应该会在列表中显示10多个项目。下面是我当前的代码：
<div ng-repeat="items in itemList()">
{{items.name}}
</div>
我的控制器是：
$scope.itemsList = function(){
return service.getItemList();
}
如何在项目下添加更多链接，当我单击“更多”时再显示10个项目
浏览 1提问于2015-11-17得票数 0
假设我们在UI中有很多项。当用户单击某一项时，UI应该显示一个弹出/dialiog/overlay元素，其中包含一些选项、操作等。
目前，我看到两种选择：
复制每个项目的叠加元素，并隐藏它，直到单击关联项。就像这把小提琴：
<div ng-show="currentItem"> showing options for: {{currentItem.name}} </div> <li ng-repeat="item in items" ng-click="showOptions(item)&
浏览 5提问于2013-04-10得票数 6
回答已采纳
假设我有一个使用ng-repeat从$scope.items呈现的项目列表。这个列表相当大，并且定期更新，但一次只更新一个项目，例如。项2上的12个更新，然后项359上的2个更新，然后项1071上的89个更新，等等。
据我所知，更新$scope.items列表中的单个项目将导致AngularJS重新呈现整个列表，即使大多数项目根本没有更改。这似乎是一件毫无意义的事情，而且肯定可以以一种更有效的方式处理。我可以使用像jquery这样的工具并自己更新DOM，但这似乎在很大程度上削弱了AngularJS的意义。在AngularJS中，有没有办法更新ng-repeat生成的模型中的单个列表元素？
浏览 1提问于2013-03-10得票数 4
7回答
我见过如此质疑。
我的代码而不是ng-bind="item.desc"使用{{item.desc}}，因为我之前有一个ng-repeat。
所以我的代码是：
<div ng-repeat="item in items">
{{item.description}}
</div>
项目描述包含未呈现的新行的\n。
假设我有上面的ng-repeat，{{item.description}}怎么能轻松地显示换行符呢？
浏览 167提问于2013-10-30得票数 186
回答已采纳
我有以下HTML代码。这是一个从costList获取项目列表并将其显示在不同行中的表。我希望项目值显示在行单击上。我如何在Angular中实现它。提前谢谢你。
<table>
<tr ng-click = "displayItem()" ng-repeat = "item in costList">
<td>{{item}}</td>
</tr>
</table>
浏览 8提问于2017-06-16得票数 0
回答已采纳
我有两个DIVs，它们都使用ng-repeat填充了一些条目列表。我需要在单击第一个DIV中的一个DIV并移动第二个DIV中的滚动条后，在两个DIV中突出显示相同的项目，以便在屏幕上显示该项目，以防它不可见。
突出显示效果很好，但我不能仅通过更改属性来移动滚动条。我尝试使用名为"scroll“的过滤器来处理类更改，但我无法在内部访问类更改发生的元素。(我不能在过滤器中执行类似"element.parentNode.parentNode.scrollTop = element.offsetTop“的操作。)
可以为每个LI元素创建ID，将其传递给筛选器并使用document.ge
浏览 0提问于2014-04-15得票数 0
我正在做Angularjs项目，我需要冻结一个div，这取决于条件。我试着用ng-disabled，但这对我来说一点也不冷。这是密码
<div ng-repeat="item in list.items" ng-disabled="true">
我会很感激你的帮助。
编辑：
<div ng-repeat="item in list.items" ng-click="goToFunction()" ng-disabled="true">
现在我有了另一个问题，正如你们建议我可以改变css。但是
浏览 1提问于2014-05-21得票数 0
回答已采纳
我有两个作用域对象
$scope.selectedItems = [1,3]
$scope.items = [{'id':'1','name':'apple'},{'id':'2','name':'banana'},{'id':'3','name':'grapes'}]
在我的模板中，我想对$scope.selectedItems使用ng-repeat，但要显示项目名称。有可能吗？
史密斯。喜欢
<
浏览 1提问于2015-10-04得票数 0
我正在尝试开发一个类似FaceBook的通知(比如当收到好友请求时，右上角会出现一个图标，上面会闪烁着数量的通知)。
为此，我编写了一个popover指令。
app.directive('popOver', function ($compile) {
var itemsTemplate = "<div ng-repeat='item in items'>{{item}} <br/><hr/></div> ";
var getTemplate = function (contentType) {
浏览 2提问于2014-04-24得票数 0
我有一个列表视图，允许我单击并显示其详细信息：
<li ng-repeat="item in data.items" ng-click="show(item.id)" ng-class="{'active':selectedId==item.id}">
<div class="item-list">.. </div>
...
</li>
当我点击项目时，我使用ng-显示和ng-隐藏来基本显示详细信息，或者如果列表中没有项目，则隐藏。
我想了解如何在页面加载的列表中
浏览 1提问于2013-08-19得票数 1
回答已采纳
1回答
目前，我有一个防火墙结构，列出每个项目下的项目。当前，下面的代码显示所有项目。现在，当我单击一个项目时，它会链接到items页面。但是，我将如何显示与该项目相关的所有项目？
消防基地结构有：
data
> project unique id's
> items
> item id's
> item title
app.controller("ItemDisplayController", function($scope, $firebaseArray) {
浏览 2提问于2017-03-01得票数 0
回答已采纳
我试图向用户显示一个popover中的项目列表，所有项目都在一个ng-repeat中。我使用了angularjs以及ui-bootstrap包()。
HTML
<div ng-repeat='session in sessions'>
<p popover="{{session.items}}">view items</p>
</div>
这将显示每个会话的数组session.items，其中包含我要显示的信息。但是，这也显示了数组的括号。
有没有人知道一种干净利落的方法？
如有任何帮助，我们将不胜感激。
浏览 0提问于2014-01-22得票数 1
我有以下代码：
<div ng-hide="items.length == 0">
<li ng-repeat="item in items" ng-hide="item.hide == true">
{{ item.name }} <hide-button />
</li>
</div>
想象一下，我有10个项目。单击该按钮时，我将item.hide设置为true，项目将消失。当我隐藏所有10个项目时，我想隐藏主div。用AngularJS实现这一目标的
浏览 3提问于2015-04-09得票数 1
回答已采纳
我有一个项目列表，我正在使用ng-重复填充
<ul>
<li ng-repeat="item in items" ng-class="setClass" ng-click="assignClass()">{{item.name}}</li>
</ul>
在我的控制器里
$scope.assignClass = function(){
$scope.setClass = "sampleClass";
}
当我这样做并点击任何一个项目时，所有的项目都会得到sampleC
浏览 3提问于2016-04-07得票数 1
回答已采纳
下面的代码片段显示了我试图实现的目标。我基本上是给select中的选项分配一个标签。标签上的类，即label-multi，也对选项应用了一些样式。虽然这对于静态选项很有效，但当我尝试使用ng-repeat循环时，我的选项显示为{{item.name}}，而不是项目的实际名称。
{{item.name}}绝对是可用的，并且在没有标签的情况下工作得很好。但是应用这个类label-multi似乎在某种程度上干扰了。这里的问题可能是什么？
<div class="row">
<div class="col-sm-2">
浏览 0提问于2014-12-10得票数 1
我有一个用来显示的项目数组。
<tr ng-repeat="i in items | filter:search_text" ...>
这些项目都有一个复选框，表示“已选中”或未选中。当我需要做一些事情时，我如何知道过滤器显示了哪些项目，比如调用删除函数来删除所有选定的项目？
已选中(在复选框中选中)然后通过过滤隐藏的项目仍处于选中状态。我需要一种方法来知道目前屏幕上显示的是哪一项。
浏览 0提问于2013-02-26得票数 8
回答已采纳
我有两个div，一个是空的，另一个是预定义的项。单击一个列表中的项时，另一个列表将获得添加到其中的项。
我想要实现的是动画项目从一个列表，以显示物理移动到另一个。(我希望物品从右向左移动)。我对CSS动画或AngularJS动画不太了解。在jQuery中，我只需调用div上的$().animate()来修改属性。
我将如何在AngularJS中做同样的事情呢？
联署材料：
var app = angular.module('app', []);
app.controller('Ctrl', function ($scope) {
$scope.
浏览 4提问于2014-03-21得票数 3
回答已采纳
有一个使用ng-repeat显示的项目列表。每个项目都与隐藏链接相关联。如果单击相应的隐藏链接，则其意图是隐藏该项。
意见：
<div ng-repeat="item in products">
<div>{{ item }}</div>
<a href"javascript:void(0)" ng-click="hideMe(item)">[delete]</label>
</div>
如何实现函数hideMe(item)，使其能够隐藏项div元素，如下所示，ng-如果
浏览 6提问于2015-10-01得票数 1
回答已采纳
我们有一个从ng-重复派生的项目列表，每个项目都可以单击ng-单击.
这些项可能包含表单元素和或ui.bootstrap.dropdown元素。
在iPad safari和chrome上，点击下拉菜单不会打开菜单，输入框不会打开键盘，尽管有时会短暂地打开。
以前有人遇到过这个吗？
缩小的示例如下所示
<div ng-repeat="item in model.items" ng-click="selectItem(item)">
<input type="text" />
<div class=&#
浏览 3提问于2015-01-07得票数 0
回答已采纳
在bootstrap 3和angularjs中，我有一个列表组，对于每个项目，我都有一个向右拉出的下拉列表:当我点击下拉菜单时，我希望只显示下拉菜单，但点击的事件会传播到该项目
<div ng-repeat="item in items" href="" class="list-group-item" ng-click="itemSelected(item)">
{{item.Name}}
<div class="dropdown pull-right" >
<
浏览 0提问于2015-04-25得票数 2
我想显示额外的信息，点击一个项目的ng重复，并隐藏在鼠标保存从这个项目。
在下面的代码片段中，当用户单击另一项时，这也会为第一项打开额外的信息。
代码片段
$scope.Click = function (object) {
console.log("Clicked")
this.showDelete = true;
$(".Close").fadeIn(); // <- this did not work actually
}
$(document).mouseup(function (e) {
!$(e.target).
浏览 1提问于2018-09-05得票数 0
回答已采纳
1回答
我有一个相当复杂的ng-repeat。显示的项目数可以由两个按钮控制。first按钮使用筛选器从ng重复中删除单个元素。第二个按钮移除一组元素并显示一组其他元素(也使用过滤器)。
我目前在ng上有一个动画-重复如下：
<style>
.animation {
-webkit-transition: 1s;
}
.animation.ng-enter {
opacity: 0;
}
.animation.ng-enter.ng-enter-active {
opacity: 1;
}
/* Similar for ng-le
浏览 3提问于2016-03-24得票数 1
回答已采纳
我是angularjs的初学者，所以我下载了一个菜单，我不知道如何让它与angularjs一起工作。当我单击项目时，我如何显示它们的子链接？
itemController.js
app
.controller('itemList', function($scope, itemProvider){
$scope.items = [];
$scope.sublinks = null;
itemProvider.getItems().success(function(data){
$scope.items = d
浏览 3提问于2015-05-09得票数 1
我在表行中有一个使用ng-click的链接，它也使用ng-click指令。
当我单击该链接时，两个ng-click指令都会触发。我如何调整它们，使只有最具体的一个(删除项目)触发？
<tr ng-repeat="item in items" ng-click="viewItem(item.id)">
<td>{{ item.name }}</td>
<td><a ng-click="removeItem(item.id, 'item.name')">Remo
浏览 2提问于2013-08-21得票数 3
回答已采纳
2回答
对于角JS中的每个环
、、、
我刚刚开始学习AngularJS，我需要能够创建带有标题的列表，然后在其中添加项目。
类别1
项目1
项目2
Etc 类别2
项目1
项目2
等
我如何创建一个循环以获得类别标题，然后也获得该类别中的项？
在代码中，我想这样显示它：
<h2>Category 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
很抱歉，我不能提供更多的信息，我不知道足够的语言提供更多。提前感谢！
编辑:我尝试过：
$scope.categorie
浏览 1提问于2016-10-16得票数 0
回答已采纳
<div ng-repeat="store in stores">
.. some html ..
<div ng-repeat="item in store.items | limitTo: 50">
... item html ...
</div>
<div ng-show="store.items.length > 50">
<button ng-click="">Show all</button>
</d
浏览 0提问于2014-01-25得票数 1
回答已采纳
这是我的带有对象的数组：
//Controller
$scope.form = [
{
name: 'Lname',
items: [{
label: 'Lastname',
type: 'text',
model: 'lname',
pattern: '/^[a-zA-Z]$/',
required: true
}]
},
{
name: 'Fname',
items: [{
label:
浏览 0提问于2015-06-08得票数 0
我有两个数据数组，它们以树的形式显示，以及它们之间的关系。
$scope.types=['odd','prime','square','even'];
$scope.items=['1','4','3','8'];
div -重复=“项目中的项目”customFilter>项目
和
div
两者都显示在ng-重复中，并且根据选定的项，另一个列表将进行调整。示例:1被选中，state变成
$scope.type='odd'，‘素数
浏览 1提问于2014-06-02得票数 1
回答已采纳
在我的代码中有类似的东西。
<ul ng-model="services">
<p ng-repeat="item in items"><b>{{ item.name }}</b>
</p>
我有例如3个项目:宝马，高尔夫和奔驰我想有一个网址与每个项目的名称，如/bmw或/mercedes和所有的网址使用details.html来显示所选项目的详细信息。我在试着理解我该如何做到这一点。
浏览 1提问于2015-06-17得票数 4
我有一个标有“保存”的按钮。我想让它在有人更改其相应的文本框值时显示出来。如何在angularjs中做到这一点。但现在，当我单击文本框中的更改内容时，ng-repeat中的所有按钮都将同时处于活动状态
increaseQty:function(){
qty++;
}
<div ng-repeat="test in tests">
<label>{{test.price}}</label>
<label>{{text.qty}}</label>
<button>increase qty&l
浏览 3提问于2018-10-03得票数 0
2回答
我有一个简单的输入列表绑定到一个项目列表，这些项目显示得很好。当我在输入中更改一个值时，和不更新？？
示例：
Html
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<p><input type=text value="{{item}}"></p>
</div>
Total: <input type=text value="{{sum(items)}}">
浏览 2提问于2014-06-08得票数 5
回答已采纳
我有一个使用ng-repeat填充表的页面。该表显示了公司的列表。在表行单击，我想打开另一个页面，其中有一个表单，以编辑选定的公司。
这是html页面
<table>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<tr ng-repeat="company in companies">
<td>{{company.companyName}}</td>
浏览 1提问于2016-02-25得票数 0
回答已采纳
我有一份清单，如
var items = [1, 2, 3];
var list = [
{
id: 1,
name: 'name 1'
},
{
id: 2,
name: 'name 3'
},
{
id: 3,
name: 'name 2'
}
]
我使用li标记(不是选项)来显示这个列表。
<div ng-repeat="item in items">
<ul>
<li ng-repeat="name
浏览 4提问于2015-08-20得票数 1
回答已采纳
1回答
<div ng-repeat="item in items">
{{ item.name }}
</div>
<div ng-repeat="item in items">
{{ item.name }} - {{ item.number}}
</div>
在本例中，AngularJS重用观察者是用于items、item和item.name，还是注册了新的观察者，即使它实际上是“物理上”相同的对象或属性？
浏览 1提问于2014-08-15得票数 3
回答已采纳
1回答
我有以下代码(我不能把所有的代码放在这里，因为它太大了，所以我只提取了与这个问题相关的内容)。
我可以添加条目(通过在别处调用ng-submit上的addItem()的单独表单)并在页面上列出它们。当我单击每个项目旁边的Edit按钮时，将打开一个模式面板，其中包含当前项目的信息。但是，当我更改这些值时，由于双向数据绑定，它们会在$scope上自动更新。
我试图实现的是，只有当我提交表单(通过单击submit按钮)时，当前项和$scope才会更新，这样我也可以单击Cancel按钮并中止操作。我猜是某种Update函数，但不确定要放入什么内容。
此外，我为items中的每个项目重复一个模式，但我不
浏览 1提问于2015-07-27得票数 0
我正在尝试做一些类似的事情：
<div ng-controller="TestCtrl">
<div ng-repeat="(k,v) in items | filter:hasSecurityId">
{{k}} {{v.pos}}
</div>
</div>
AngularJs部分：
function TestCtrl($scope)
{
$scope.items = {
'A2F0C7':{'secId
浏览 2提问于2013-02-09得票数 116
回答已采纳
我想隐藏其他人的详细信息，并显示当前单击的名称的详细信息
<li ng-click="showDetail = true" ng-repeat="item in items">{{item.name}}
<span ng-show="showDetail == true">{{item.detail}}</span>
</li>
不确定我是否做对了，我可以点击来显示详细信息，但当我点击特定名称时，它不会隐藏其他人的详细信息。
浏览 14提问于2016-09-07得票数 0
我已经创建了一个页面，其中有2个部分(2个控制器和2个视图)。
左侧部分具有类别(category_selector)，右侧部分显示在左侧部分(category_item_display)中选择的类别中的项目。
单个类别中有许多项，因此分页是在category_item_display中实现的。
分页的工作原理是加载20个项目，如果类别中有更多的项目，则会显示一个“显示更多”按钮。单击该按钮将向页面中添加另外20个项目。
单击项目时，页面将更改为项目详细信息页面，并显示项目详细信息。
现在这是我点击“显示更多”按钮一次或多次的problem.If，然后超过20个项目显示在category_it
浏览 2提问于2018-04-09得票数 0
在我的角度应用程序中，我显示了一个项目列表，我直接从我的数据库加载。我一直在努力让至少20个项目显示出来。用户可以过滤它们，所以当应用太多过滤器时，我想加载更多。
到目前为止，我这样做的方式如下: HTML：
<section id="list" class="ease">
<article class='myItems' ng-repeat="job in filteredList = (items | filter: country | filter: category | filter: pos
浏览 1提问于2014-03-21得票数 1
回答已采纳
自从升级到1.5.x版本之后，我正在从AngularJS指令迁移到组件，并为接下来的2.0迁移做准备。这基本上是一个平稳的转换，但我很难找到如何从组件控制器调用函数并在页面控制器中传递属性。
我在components.js文件中定义了一个组件
myApp.component('itemList', {
bindings: {
items: '<',
setCurrentItem: '&'
},
templateUrl: 'templates/itemPicke
浏览 2提问于2016-07-03得票数 0
回答已采纳
2回答
假设我有一个模型：
$scope.items = [{'name: 'test',value:'some value',category:'test'},{name:'value',value:'test',category:'test'}];
它是迭代的：
<div ng-repeat="item in items|filter:search">
{{item.name}} – {{item.value}}
</div>
并且有一个带有过滤器模型的输
浏览 0提问于2014-10-16得票数 0
回答已采纳
我在这个网站上复习了很多答案/问题，似乎没有一个能解决我的问题。如果我错了，我道歉。
下面是我的示例的链接，您可以看到我的代码及其行为：
考虑两个目标：
items = {
a: "apple",
b: "banana"
};
lines = [
{key: "a"},
{key: "b"},
{key: "b"},
{key: "a"}
];
我把它们展示如下：
<div ng-repeat="line in lines"&g
浏览 2提问于2014-05-08得票数 0
回答已采纳
对于ng-show index.What，我有一个问题，我想要更改ng-show index.For示例：
<div class="row" ng-repeat="list1 in Items track by index">
<button ng-click="vm.showLoc($index)">
<div class="row" ng-repeat="list2 in listGroup track by index" ng-show=
浏览 0提问于2018-03-22得票数 0
回答已采纳
我使用ng-重复方法在angularjs中显示“添加/删除”文本字段。
app.controller('myCtrl',function($scope){
$scope.items = [];
$scope.addItems = function(){
$scope.items.push({
title:null
});
}
$scope.removeItem = function(index){
$scope.items.splice(index,1)
}
})
<div ng-repeat
浏览 0提问于2018-01-31得票数 0
在对数组中的空字符串进行过滤后，只显示第一次和最后一次重复元素。
我的代码：
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", function ($scope, $window) {
$scope.items = [
{ name: "item1", color: "green", form: "" },
{ name: "item2", color: "&#
浏览 6提问于2016-01-16得票数 3
回答已采纳
我有两个控制器，其中第一个控制器包含一个项目列表：
$scope.items = [{id:1, desc:'desc1'},{id:2, desc:'desc2'}...];
第二个绑定到一个模板，该模板显示所选项目的列表：
$scope.myitems = [1,2,3,...]; // ids only
<div ng-repeat="item in myitems">
{{item.id}} / {{item.desc}}
</div>
如何从第一个控制器的项目列表中查找第二个控制器的ng重复中的项de
浏览 2提问于2015-04-30得票数 0
回答已采纳
1回答
所以我有一个包含1000多个项目的列表，我用定制的Bootstrap下拉列表来显示它，它使用
<ul ng-repeat="items in list">
<li>
{{items}}
</li>
</ul>
现在它只在我的屏幕末尾显示项目，大约有100个项目。
我试着添加overflow:auto，但是没有帮助。
//not working
<ul ng-repeat="items in list" style="overflow:auto">
<li>
浏览 0提问于2015-08-24得票数 3
我使用slack响应式旋转木马来显示项目这个项目来自数组$ctrl.items，我在这个松弛的旋转木马中使用ng-repeat，直到现在它工作得很好，问题是当我点击一个改变$ctrl.items数组中的项目的任意按钮时，slack开始垂直查看项目，如果我将屏幕宽度更改为更小或更大的屏幕，问题就消失了，滑块又可以正常工作了
<slick
dots="true"
infinite="false"
speed="300"
slides-to-show="3"
slides-to-scroll="3
浏览 0提问于2020-01-10得票数 0
我有一个ng-重复显示多个项目。当我单击视图图像按钮时，它将在该项目中显示图像。
代码运行良好，但它将在所有项目列表中添加图片的html内容，其中包含一个ng-hide类。
如何仅在项目列表中在单个li中显示图像的ng重复？
projects.html
<ul>
<li ng-repeat="item in projects">
<p>{{ item.name }}</p>
<p><button ng-click="displayImages(item.id)
浏览 3提问于2015-08-02得票数 2
回答已采纳
我想在列表中单击时添加一个活动类，我尝试了以下代码，但它在我的所有项上添加了活动类:/：
HTML :
<div class="filters_ct" ng-controller="selectFilter">
<ul>
<li ng-repeat="filters in filter" ng-click="select(item)" ng-class="{sel: item == selected}">
<span cla
浏览 4提问于2014-01-03得票数 40
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
