开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angularjs -如何为来自ng重复的动态数据展开折叠的div on filter

在AngularJS中，实现一个可以根据过滤条件展开或折叠的动态数据列表，通常涉及到使用ng-repeat来遍历数据，并结合一些控制展开/折叠状态的逻辑。以下是一个基本的实现步骤和示例代码：

基础概念

ng-repeat: AngularJS中的一个指令，用于遍历数组或对象，并为每个元素渲染DOM。
过滤器（Filter）: AngularJS中的过滤器用于格式化表达式的值，或者根据指定的条件过滤数组。
控制器（Controller）: 在AngularJS中，控制器用于定义应用的业务逻辑。

实现步骤

在控制器中定义数据列表和展开/折叠状态。
使用ng-repeat遍历数据列表。
使用ng-show或ng-if来控制每个项目的展开/折叠状态。
添加一个过滤器来动态更新显示的数据。
添加事件处理来切换展开/折叠状态。

示例代码

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">

<input type="text" ng-model="searchText" placeholder="Filter items...">
<div ng-repeat="item in filteredItems = (items | filter:searchText)">
    <div ng-click="toggle($index)" style="cursor:pointer;">
        {{item.name}} - {{item.expanded ? 'Collapse' : 'Expand'}}
    </div>
    <div ng-show="item.expanded">
        Details: {{item.details}}
    </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
    $scope.items = [
        {name: 'Item 1', details: 'Details for Item 1', expanded: false},
        {name: 'Item 2', details: 'Details for Item 2', expanded: false},
        // ... more items
    ];

    $scope.toggle = function(index) {
        $scope.items[index].expanded = !$scope.items[index].expanded;
    };
});
</script>

</body>
</html>

解释

HTML部分:
- 使用ng-app和ng-controller指令来定义AngularJS应用和控制器。
- 输入框使用ng-model绑定到searchText，用于过滤数据。
- ng-repeat遍历filteredItems，这是原始items数组经过过滤器处理后的结果。
- 点击项目名称时，调用toggle函数来切换展开/折叠状态。
JavaScript部分:
- 定义了一个包含多个对象的数组items，每个对象有name、details和expanded属性。
- toggle函数用于切换指定索引项目的expanded状态。

应用场景

这种展开/折叠的动态数据列表适用于任何需要根据用户输入过滤并展示详细信息的场景，例如产品列表、日志查看器、文档目录等。

可能遇到的问题及解决方法

性能问题: 如果列表非常大，频繁的DOM操作可能导致性能下降。可以通过虚拟滚动（如使用angular-ui-scroll库）来优化性能。
过滤器不生效: 确保过滤器的逻辑正确，并且ng-model绑定的变量名正确无误。
展开/折叠状态不同步: 确保每次过滤后重新计算展开/折叠状态，或者在过滤函数中处理状态的同步。

通过上述方法，你可以实现一个功能丰富且用户友好的动态数据列表，它能够根据用户的输入动态展开或折叠详细信息。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何使用 AngularJS 构建功能丰富的表格？

如果尚未安装，请根据AngularJS官方文档的指引执行安装步骤。创建基本的表格在 AngularJS 中，我们可以使用 ng-repeat 指令迭代一个数组，以动态生成表格的行。...然后，使用 ng-repeat 指令迭代名为 items 的数组，生成表格的数据行。通过双花括号插值语法 {{ }}，我们可以在表格中显示数据。动态生成表头对于表格来说，表头是非常重要的一部分。...在 AngularJS 中，我们可以使用 ng-repeat 指令动态生成表头。...通过遍历 columns 数组，我们可以动态确定表格的列数和列名。排序和过滤表格数据AngularJS 还提供了排序和过滤表格数据的功能。...通过 filter 过滤器，我们可以将符合搜索条件的数据显示在表格中。分页对于包含大量数据的表格，我们通常需要提供分页功能，以优化用户体验。

2912 0

【AngularJS】 # AngularJS入门

AngularJS表达式 AngularJS 使用表达式把数据绑定到 HTML 使用{ { 表达式 }}进行数据的输出表达式可以包含字符，操作符，变量表达式可以写在HTML中不支持条件判断，...重复HTML元素 ng-repeat指令：重复一个HTML元素，用作循环 div ng-app="" ng-init="names=['Tom','Jack','Hege']"> ...控件未失去焦点 ng-valid 验证通过 ng-invalid 验证失败 ng-dirty 值改变的时候 ng-pending 任何为满足 $asyncValidators...> 过滤输入 filter：ng-model的名称符合过滤规则的显示，不符合的不显示 div ng-app="myApp" ng-controller="namesCtrl"> 输入过滤：AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

23.2K6 0

AngularJS：如何使用自定义指令来取代ng-repeat

引言本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能，又具有超高的性能。...对于处理小数量，ng-repeat是非常有用的，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。也别是数据大多都是静态的或已预存储好的，这个时候应避免使用ng-repeat指令。...那么最好的方法就是自定义指令，换言之，静态数据可以使用一些简单的方法来格式化。实现步骤首先创建无序列表，用于保存动态绑定的内容。...创建UL标签作为容器用于显示列表我们选择动态加载List中的数据，首先添加div标签，并命名为"repeater-alternative"用于渲染流中。...，所以输出结果与调用ng-repeat结果相同，但是渲染更快，因为该方法只有一种数据绑定方式和少量的$watch。

2.5K7 0

AngularJS 指令的定义、语法、用法

指令可以被重复使用，并且可以与控制器和作用域（Scope）进行绑定，从而实现数据的双向绑定和页面元素的动态更新。...AngularJS 提供了一些内置的指令，如 ng-model、ng-repeat、ng-show 等，同时也支持开发者自定义指令。---2....AngularJS 指令的用法AngularJS 指令可以在 HTML 代码中任何地方使用，并且可以与控制器和作用域（Scope）结合使用，实现数据的双向绑定和页面元素的动态更新。...ng-model="name">4.2 ng-repeat 指令ng-repeat 指令用于在 HTML 元素中重复渲染一段 HTML 代码，根据数组或对象的内容动态生成多个相同的...div ng-show="isVisible">可见内容div>div ng-hide="isHidden">隐藏内容div>4.4 自定义指令除了内置的指令之外，AngularJS 还支持开发者自定义指令

3303 0

前端MVC学习总结（二）——AngularJS验证、过滤器、指令

二、过滤器使用过滤器格式化数据，变换数据格式，在模板中使用一个插值变量。...模板通过指令指示AngularJS进行必要的操作。比如：ng-app指令用来通知AngularJS自动引导应用；ez-clock 指令用来通知AngularJS生成指定的时钟组件。...3.2.2、ng-class-even与ng-class-odd AngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素 ng-class-even与ng-class类似，ng-repeat...div ng-repeat="row in [1,1,1]"> div ng-repeat="row in [1,1,1] track by $index"> ng-repeat还是需要一个唯一的key...3.2.5、ng-switch 根据作用域表达式动态切换把那个DOM元素包含在已经编译的模板中。

15.4K6 0

【Hybrid开发高级系列】AngularJS(一)——基础专题

ng-init -该指令初始化应用程序数据。 ng-model -此指令定义的模型，该模型是变量在AngularJS使用。 ng-repeat -该指令将重复集合中的每个项目的HTML元素。...开发者也可以在局部使用ng-app指令,如，则AngularJS脚本仅在该div>中运行。...如果你想拼接一个类名出来，可以使用插值表达式，如： div class=”{{style}}text”>字体样式测试div> 然后在controller中指定style的值： ...使用filter过滤器：filter函数使用query的值来创建一个只包匹配query记录的新数组。 ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。...服务器用js on文件中的数据作为响应。(这个响应或许是实时从后端服务器动态产生的。但是对于浏览器来说,它们看起来都是一样的。

5508 0

AngularJS简介

绑定 HTML 元素到 HTML 表单 ng-bind 指令把应用程序数据绑定到 HTML 视图。 ng-init 指令初始化 AngularJS 应用程序变量。...AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。 AngularJS 把应用程序数据绑定到 HTML 元素。...AngularJS 可以克隆和重复 HTML 元素。 AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素”背后”添加代码。...AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。 AngularJS 将在表达式书写的位置”输出”数据。...filter 过滤器从数组中选择一个子集： div ng-app=”myApp” ng-controller=”namesCtrl”> ng-model=”

5K2 0

前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

、致力于减轻开发人员在开发AJAX应用过程中的痛苦 5、angular 是最适合CRUD的SPA 单页面的应用程序不适合SEO、交互频繁的，如游戏之类交互体验网站 AngularJS的核心组件： 1.6...特殊属性应用于每个模板实例的本地域上，包括：对象集合的修改将会自动更新视图为了解决重复元素序列只有一个父元素的情况，ngRepeat (不同于其它ng指令)支持扩展重复范围，通过使用ng-repeat-start...ng-repeat-start 指令工作方法类似ng-repeat，但是会重复从标签定义本身位置开始到ng-repeat-end定义位置之间的所有HTML代码。...ngClass指令允许你动态设置HTML元素的CSS类，通过绑定到一个包含要添加的所有类的表达式。 ...2、通过$scope对象把数据模型和函数暴露给视图（UI模板） 3、监视模型其余部分的变化，并采取相应的动作，双向绑定为了让控制器保持轻量可管理状态，建议在视图的每一块功能区域创建一个控制器如，MenuController

15.4K10 0

前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

$sce 是 angularJS 自带的安全处理模块，$sce.trustAsHtml(str) 方法便是将数据内容以 html 的形式进行解析并返回。...将此过滤器添加到 ng-bind-html 、data-ng-bind-html? 所绑定的数据中，便实现了在数据加载时对于 html 标签的自动转义。示例代码：的修改将会自动更新视图为了解决重复元素序列只有一个父元素的情况，ngRepeat (不同于其它ng指令)支持扩展重复范围，通过使用ng-repeat-start 和 ng-repeat-end...ng-repeat-start 指令工作方法类似ng-repeat，但是会重复从标签定义本身位置开始到ng-repeat-end定义位置之间的所有HTML代码。...2.9、ng-class与ng-style 指定类样式与行内样式。 ngClass指令允许你动态设置HTML元素的CSS类，通过绑定到一个包含要添加的所有类的表达式。

12.6K3 0

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

ng-model 是双向数据绑定（$scope -> view and view -> $scope），用于绑定值会变化的表单元素等。双向数据绑定是 AngularJS 的核心机制之一。...当你写下表达式如{{ val }}时，AngularJS在幕后会为你在scope模型上设置一个watcher（表达式将被 Angular 编译成一个监视函数），它用来在数据发生变化的时候更新view。...假设你在一个ng-click指令对应的handler函数中更改了scope中的一条数据，此时AngularJS会自动地通过调用$digest()来触发一轮$digest循环。...就算你直接把这个 span 元素干掉，只要 watch 表达式还在，要检查的还会检查。再次：重复的表达式会重复检查吗？会。最后：别忘了 ng-show="false"。...第二点区别是，ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。

7.9K4 0

Angularjs基础(四)

AngularJS过滤器可用于转换数据：　　　　　　　　　　currency　　　　格式化数字为货币格式　　　　　　　　　　filter 　　　　　　从数组中选着应子集。　　　　　　　　　　...filter过滤器从数组中选着一个子集：　　　　　　　　　　　　实例　　　　　　　　　　　　　　div ng-app="myApp" ng-controller="namesCtrl">...$http 是AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。　　　　...$http 服务　　　　$http 是AngularJS 应用中做常用的服务。服务像服务器发送请求。应用响应服务器传递过来的数据。　　　　　　　　...$http 　　　　　　AngularJS $http 是一个用于读取web服务器上数据的服务。

2.9K9 0

（4）Angular的开发

image.png HTML 页面中 ng-xxx 的属性称之为指令 ng-app 指令告诉 AngularJS，div> 元素是 AngularJS 应用程序管理的边界 ng-model 指令把文本框的值绑定到变量...scope暴露数据模型（数据，行为） AngularJS 表达式可以包含字母，操作符，变量 ng-repeat指令用来编译一个数组重复创建当前元素 ng-link/ng-src 过滤器（Filter）过滤器的主要用途就是一个格式化数据的小工具， date 过滤器 {{'1284893553026' | date:"MM/dd...="item in messages | limitTo:-2"> {{item.content | limitTo:2 }} filter过滤器会根据设置的检索数据过滤未匹配到的数据内容...image.png AngularJS实现了双向数据绑定 ----

3.1K4 0

4-进军 angular1.x 控制器和过滤器

4-控制器和过滤器 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令，数据绑定 3-模型和作用域 scope 4-控制器和过滤器基本 AngularJS 应用程序被控制器控制...过滤器 angular 的过滤器用于装换数据，其实类似于 vue1.x 的过滤器。一样的功能。...div ng-app="myApp" ng-controller="personCtrl"> 姓名为 {{ lastName | uppercase }}p> div> 复制代码向指令添加过滤器...orderby orderBy 过滤器根据表达式排列数组：根据 country 的首字母排序出现，当然我们可以试试 name AngularJS 实例 div ng-app="myApp" ng-controller...filter 过滤器从数组中选择一个子集：选择一个输入拥有其中字符的子集。

1.9K3 0

【AngularJS】—— 1 初识AngularJs

这次正好学习AngularJS，直接复习一下前端的知识。目前这里还是弱点，慢慢深入的学习。　　AngularJS是Google的优秀的前端框架，目前已经应用于多个产品。　　...AngularJs相对于其他的框架来说，有一下的特性：　　1 MVVM 　　2 模块化　　3 自动化双向数据绑定　　4 语义化标签　　5 依赖注入　　由于很多概念都不了解，这些特性也无法理解。...div ng-app=""> 我的第一个表达式： {{ 5 + 5 }} div> 2 指令　　通过特定的标签指定，完成数据的绑定以及定义，抓取 div ng-app=""...你输入的为： {{ firstName }} div> 　　ng-app 定义AngularJS的应用程序　　ng-init 初始化应用程序变量　　ng-model 获取程序变量...div> 　　filter　　从数据项中选定一个子集 div ng-app="" ng-controller="namesController"> 输入过滤: <input

2.8K9 0

Angularjs基础(三)

AngularJS ng-model 指令　　　　ng-model 指令用于绑定应用程序数据到HTML 控制器（input,select,textarea）的值 ng-model指令　　　　...，AngularJS属性的值也将修改：　　　　　　实例：　　　　　　　　div ng-app="myApp" ng-controller="myCtrl"> 　　　　　　　　　　...Scope概述　　　　AngularJS应用组成如下：　　　　View(视图)，即HTML。　　　　Model(模型)，当前视图中可用的数据。　　　　...实例：当我们使用ng-repeat 指令时，没个重复项都访问了当前的重复对象。　　　　　　　　...控制器　　　　AngularJs 控制器控制AngularJS 应用程序的数据。

3.1K5 0

基于AngularJS的过滤与排序

本程序中可以了解到：　　1 angularjs的过滤器　　2 ng-repeat的使用方法　　3 控制器的使用　　4 数据的绑定　　程序设计分析　　首先，如果要是先查询过滤，就要使用到...AngularJS中的过滤器filter 了。　　...在这里直接使用ng-model实现数据的绑定即可： Search:ng-model="query"> Sort by:ng-model...并且减少了大量不必要的监听器啊触发器啊之类的代码的编写，真正实现了类似spring的效果~ 　　数据的展现，可以通过ng-repeat实现。...script中进行perons数组的初始化： div ng-controller="ctl"> ...

2.3K6 0

angularjs学习第二天笔记---过滤器

第二天，几天主要学angularjs中的过滤器一、简介　　angular js 的过滤器简单的理解就是格式化数据，当数据格式不满足要求时不会报错，直接展示空　　angularjs内置了一些常用的过滤器..."> div ng-controller="myContro"> angular js 之过滤器 div>angular js 的过滤器简单的理解就是格式化数据...，当数据格式不满足要求时不会报错，直接展示空 angularjs内置了一些常用的过滤器，当然也可以根据需要自定义过滤器 div> div..."> div ng-controller="myContro"> angular js 之过滤器 div>angular js 的过滤器简单的理解就是格式化数据...，当数据格式不满足要求时不会报错，直接展示空 angularjs内置了一些常用的过滤器，当然也可以根据需要自定义过滤器 div> div

1.3K2 0

AngularJS入门心得1——directive和controller如何通信

1.AngularJS是何方神圣　　Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。...　　（3）双向数据绑定　　（4）指令　　每一个特性都可以大篇幅的展开，显然，目前能力不够，没法展开，有兴趣可以网上搜下，大体了解。　　.../css/bootstrap.css"> 6 7 8 div ng-controller="MyCtrl"> 9...（1）HTML页面中，声明一个标签，其中定义一个属性名：water 属性值：pureWater（这里的{{}}是angularjs的一种常见表达式，类似于ng-model...3.指令作用域中的& 　　主要作用是传递一个来自父scope的函数，稍后调用。 1 <!

1.7K6 0

angularjs学习第二天笔记---过滤器

第二天，几天主要学angularjs中的过滤器一、简介　　angular js 的过滤器简单的理解就是格式化数据，当数据格式不满足要求时不会报错，直接展示空　　angularjs内置了一些常用的过滤器..."> div ng-controller="myContro"> angular js 之过滤器 div>angular js 的过滤器简单的理解就是格式化数据...，当数据格式不满足要求时不会报错，直接展示空 angularjs内置了一些常用的过滤器，当然也可以根据需要自定义过滤器 div> div..."> div ng-controller="myContro"> angular js 之过滤器 div>angular js 的过滤器简单的理解就是格式化数据...，当数据格式不满足要求时不会报错，直接展示空 angularjs内置了一些常用的过滤器，当然也可以根据需要自定义过滤器 div> div

1.3K1 0

AngularJS应用开发思维之1：声明式界面

这篇博客之前承接上一篇：http://www.cnblogs.com/xuema/p/4335180.html 重写示例：模板、指令和视图 AngularJS最显著的特点是用静态的HTML文档，就可以生成具有动态行为的页面...ng-app这样的标记我们称之为指令。模板通过指令指示AngularJS进行必要的操作。...比如：ng-app指令用来通知AngularJS自动引导应用；ez-clock 指令用来通知AngularJS生成指定的时钟组件。...发现ez-clock 调用ez-clock指令的实现函数（指令类工厂）进行展开根据我们的定义，ez-clock的展开操作如下：使用一个div元素替换这个自定义标签创建一个定时器，在定时器触发时刷新...div元素的innerText ez-clock这样的非HTML标准标签，在AngularJS中之所以称为指令/directive，就是指看到它时，基础框架需要对其进行解释，以便展开成浏览器可以理解

1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭