AngularJS의 배열 매핑

Muhammad Adil 2023년1월30일
  1. AngularJS의 배열 매핑
  2. 지도 항목
  3. AngularJS의 배열 매핑 단계
AngularJS의 배열 매핑

이 기사에서는 AngularJS의 배열 매핑을 다룹니다.

AngularJS의 배열 매핑

배열 매핑은 AngularJS에서 가장 중요한 기능 중 하나입니다. 한 줄에 변수를 생성할 수 있어 각 변수를 별도로 선언하지 않아도 됩니다.

데이터 바인딩을 단순화하고 성능을 개선하며 유지 관리가 더 쉬운 템플릿을 만들 수 있습니다. 또한 독자는 코드에서 할당된 값과 변수의 목적을 쉽게 이해할 수 있습니다.

배열 매핑은 map 함수를 사용하고 배열을 키, 값 등과 같은 다른 매개변수와 함께 매개변수로 전달하여 수행됩니다.

통사론:

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

지도 항목

아래는 우리가 사용할 수 있는 지도 항목입니다.

  • map.delete()는 지도에서 항목을 버립니다.
  • map.size()는 지도의 크기를 반환합니다.
  • map.clear()는 지도 데이터를 제거합니다.
  • map.set()은 새 항목을 추가합니다.
  • map.get()은 지도에서 항목을 검색합니다.
  • map.has()는 지도에 항목이 있는지 여부를 결정합니다.

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 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