文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在AngularJS中用ng-repeat迭代键和值？

问如何在AngularJS中用ng-repeat迭代键和值？

提问于 2017-12-15 07:39:20

回答 2关注 0查看 405

在我的控制器中，我有这样的数据：

$scope.object = data

现在这个数据是包含键和值的字典json。

我可以访问object.name模板中的属性。有没有什么办法可以迭代键，并将它们显示在表中

<tr><td> {{key}} </td> <td> data.key </td>

数据是这样的

    "id": 2,

    "project": "wewe2012",

    "date": "2013-02-26",

    "description": "ewew",

    "eet_no": "ewew",

angularjs

回答 2

心愿

发布于 2017-12-15 08:39:26

如果你想用双向绑定编辑属性值：

<tr ng-repeat="(key, value) in data">

    <td>{{key}}<input type="text" ng-model="data[key]"></td>

</tr>

人生的旅途

发布于 2017-12-15 08:36:42

你可以这样：

<table>

  <tr ng-repeat="(key, value) in data">

    <td> {{key}} </td> <td> {{ value }} </td>

  </tr>

</table>

和开发者交流更多问题细节吧，去写回答

[一起学RL] 策略迭代和值迭代

github https git 开源网络安全

上一次分享了十个问题认识MDP，强化学习的目的是要找到一个策略π，使得累积回报的期望最大。这次和大家分享如何在MDP下做决策以及如何得到各个状态对应不同动作下的v值。如果想详细学习的可前往“参考”中的链接。

秋枫学习笔记

2022/09/19

1.6K0

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

angularjs

在 Web 开发中，表格是一种常见的数据展示方式。AngularJS 提供了强大的指令和服务，使得表格的创建和操作变得更加简单、高效。本文将详细介绍 AngularJS 中的表格相关知识，并演示如何使用 AngularJS 构建功能丰富的表格。

网络技术联盟站

2023/07/05

4450

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

angularjs

引言本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能，又具有超高的性能。对于处理小数量，ng-repeat是非常有用的，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。也别是数据大多都是静态的或已预存储好的，这个时候应避免使用ng-repeat指令。 ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数。用于监听模型变化，当你的模型部分发生变化时它会通知你。在ng-repeat指令中，如果某行数据有15

葡萄城控件

2018/01/10

2.5K0

Angularjs基础(五)

云数据库 SQL Server php

AngularJS Select(选项框) 　　　　AngularJS 可是使用数组或对象创建一个下拉列表选项。使用ng-options创建选项框　　　　在AngularJS 中我们可以使用ng-option指令来创建一个下拉列表，列表通过对象和数组循环输出　　　　　　实例：　　　　　　　　<div ng-app="myApp" ng-controller="myCtrl"> 　　　　　　　　　　　　<select ng-model="selectedName" ng-opti

用户1197315

2018/01/19

3.4K0

angularjs中设置select的选中项

key model repeat select width

最近用angularjs比较多，里面有很多自己的方法，都不咋会用，这篇只是个笔记，防止自己忘记

庞小明

2019/07/08

3.3K0

第215天：Angular---指令

其他

在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等

半指温柔乐

2018/09/11

3.3K0

AngularJS 的 API：模块 API、指令 API、服务 API、过滤器 API、路由 API

angularjs

AngularJS 是一款流行的前端 JavaScript 框架，提供了丰富的 API 接口，用于实现前端应用的各种功能。本文将详细介绍 AngularJS 的 API，包括模块 API、指令 API、服务 API、过滤器 API、路由 API 等内容，帮助开发者充分了解和熟练运用 AngularJS 的各项功能。

网络技术联盟站

2023/07/05

4130

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

angularjs

AngularJS 是一个流行的前端框架，它提供了许多强大的功能和特性，其中之一就是指令（Directives）。指令是 AngularJS 中的核心概念之一，它允许开发者通过自定义 HTML 标签、属性或类名的方式来扩展 HTML 语义并增强页面的交互性和可重用性。本文将详细介绍 AngularJS 指令的定义、语法、用法以及一些实用技巧。

网络技术联盟站

2023/07/05

4570

angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）

其他

本次做一个简单的关于动态生成select的练习　　在实现上有两种方式：　　　　其一、通过ng-repeat来实现　　　　其二、通过ng-option来实现　　　　在页面效果上，两种实现的效果都一样　　　　但是在数据选择的数据从操作上有所不同　　　　ng-repeat选中的是其option对应的value值　　　　ng-option选择的是其对应绑定数据的一个object对象　　在实际应用中建议采用ng-option实现　　代码实例： <!DOCTYPE html> <html xmlns=

小小许

2018/09/20

1.5K0

AngularJS 指令

angularjs html 人工智能

AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性，带有前缀ng-。 ng-app指令初始化一个 AngularJS 应用程序。 ng-init指令初始化应用程序数据。 ng-model指令把元素值（比如输入域的值）绑定到应用程序。完整的指令内容可以参阅 AngularJS 参考手册。 AngularJS 实例在输入框中尝

企鹅号小编

2018/01/26

3.5K0

AngularJS处理和转换视图中数据的重要工具：过滤器

angularjs

AngularJS 是一个功能强大的 JavaScript 前端框架，它提供了丰富的内置过滤器，用于处理和转换视图中的数据。过滤器是 AngularJS 的核心特性之一，它可以帮助我们在模板中对数据进行排序、过滤、格式化等操作，从而更好地满足用户需求。本文将详细介绍 AngularJS 过滤器的概念、特性和用法，并提供一些示例来帮助读者更好地理解和应用。

网络技术联盟站

2023/07/05

2820

Angularjs基础(二)

angularjs

AngularJS 表达式　　AngularJS 表达式写在双大括号内：{{expression}} 　　AngularJS 表达式把数据绑定到HTML，这与ng-bind 指令有异曲同工之妙　　AngularJS 将在表达式书写的位置输出数据。　　AngularJS 表达式很像JavaScript表达式：他们可以包含文字，运算符和变量。　　　　实例{{5+5}} 或者{{firstName + "" +lastName}} AngularJs 数字　　AngularJS 数字就像J

用户1197315

2018/01/19

3.6K0

AngularJS 指令

angularjs html 编程算法

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。

陈不成i

2021/07/23

3.2K0

angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）

angularjs html xml

小小许

2018/08/30

8050

Angularjs基础(三)

angularjs

　　　　AngularJS ng-model 指令　　　　ng-model 指令用于绑定应用程序数据到HTML 控制器（input,select,textarea）的值 ng-model指令　　　　ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。　　　　　　实例：　　　　　　　　<div ng-app="myApp" ng-controller="myCtrl"> 　　　　　　　　　　　　名字：<input ng-model="name"> 　

用户1197315

2018/01/19

3.2K0

【一起来烧脑】一步学会AngularJS系统

html http javascript 编程算法

AngularJS是一个JavaScript框架一个用JavaScript编写的库

达达前端

2019/07/18

5.7K0

AngularJS Scope(作用域)

html javascript angularjs

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

陈不成i

2021/07/23

1.6K0

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

mvc angularjs

一、验证 angularJS中提供了许多的验证指令，可以轻松的实现验证，只需要在表单元素上添加相应的ng属性，常见的如下所示： <input Type="text" ng-model="" [name

张果

2018/01/04

15.6K0

AngularJS指令「建议收藏」

angularjs html java https

AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。

全栈程序员站长

2022/09/15

1.1K0

AngularJS例子 ng-repeat遍历输出通过js的splice方法删除当前行

angularjs

<!doctype html> <html> <head> <meta charset="utf-8"> <title>ng-repeat directive</title> </head> <body ng-app="myApp"> <table ng-controller="CartController"> <caption>我的购物车</caption> <tr> <th>序号</th> <th>商品</th> <th>单

庞小明

2018/03/08

1.7K0

相似问题

AngularJS ng-repeat如何处理空列表大小写的情况？

2351

腾讯云cos 如和本地文件同步？

11.1K

ng-repeat：单个字段过滤？

2502

AngularJS控制器中的'this'和$ scope？

1359

如何在迭代时从列表中删除项目？

2456

问如何在AngularJS中用ng-repeat迭代键和值？

回答 2

心愿

人生的旅途

AngularJS ng-repeat如何处理空列表大小写的情况？

腾讯云cos 如和本地文件同步？

ng-repeat：单个字段过滤？

AngularJS控制器中的'this'和$ scope？

如何在迭代时从列表中删除项目？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐