AngularJS 中的数组映射

Muhammad Adil 2023年1月30日
  1. AngularJS 中的数组映射
  2. map 条目
  3. AngularJS 中数组映射的步骤
AngularJS 中的数组映射

本文将讨论 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 中进行数组映射:

  • 为页面创建一个控制器。
  • 创建一个数据数组。
  • 将表格添加到页面并设置列和行。
  • 向控制器添加代码,循环遍历每一行数据并为每一列创建一个输入字段。
  • 创建一个对象字面量。
  • 使用方括号 [] 为对象文字的每个键分配值。
  • 创建一个 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);

点击这里查看上述代码的演示。

作者: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相关文章 - Angular Array