迹忆客 专注技术分享

本文将讨论 AngularJS 中的数组映射。

AngularJS 中的数组映射

数组映射是 AngularJS 中最有价值的特性之一。它允许你在一行上创建变量，从而避免单独声明每个变量。

它简化了数据绑定，提高了性能，并允许我们创建更多可维护的模板。此外，读者可以很容易地理解在代码中分配了哪些值以及变量的用途。

数组映射是使用 map 函数完成的，并将数组作为参数与其他参数（如键、值等）一起传递。

语法：

var myArr = map(myObj);
//myArr = [{key1: "value1", key2: "value2"}, {key3: "value3"}];

map 条目

以下是我们可以使用的 map 条目。

• map.delete() 从 map 中丢弃一个项目。
• map.size() 返回 map 的大小。
• map.clear() 删除 map 数据。
• map.set() 添加新条目。
• map.get() 从 map 中检索条目。
• map.has() 确定 map 中的条目是否存在。

AngularJS 中数组映射的步骤

以下步骤将帮助你在 AngularJS 中进行数组映射：

1. 为页面创建一个控制器。
2. 创建一个数据数组。
3. 将表格添加到页面并设置列和行。
4. 向控制器添加代码，循环遍历每一行数据并为每一列创建一个输入字段。
5. 创建一个对象字面量。
6. 使用方括号 [] 为对象文字的每个键分配值。
7. 创建一个 map 函数，将对象文字中的值分配给我们的数组。

AngularJS 中的数组映射示例

让我们看一个 Angular 数组映射的例子。

var tags =  [{ "id": 1, "name": "Adil" }, { "id": 2, "name": "Steve" }, { "id": 3, "name": "Roman" }, { "id": 4, "name": "John" }]
var selectedTags = [1,2,3];
var tagMap = tags.reduce(function(map, tag) {
    map[tag.id] = tag.name;
    return map;
}, {});
var selectedArray = selectedTags.map(function(id) {
    return tagMap[id];
});
console.log(selectedArray);