목록을 구현하는 방법은 각도에서 모든 대화형 구성 요소를 선택합니다.

이 글에서는 Angular에서 목록을 작성할 때 모든 Interactive 컴포넌트를 선택하는 예를 주로 소개하고 참고용으로 올려보겠습니다.

비즈니스 백엔드를 개발할 때 테이블의 선택 항목을 사용하여 이러한 종류의 상호 작용을 모두 선택해야 하는 경우가 많습니다. 또한 다양한 시스템과 다양한 시나리오의 UI도 다릅니다. 예를 들어, 테이블에는 간단한 체크박스가 있고, UI 디자이너는 사용자가 이를 선택하면 그림에 반투명한 체크박스가 표시됩니다. 우리 시스템은 Angle 1.X 버전을 사용하여 개발되었습니다. 그래서 Angular의 장식 명령어를 사용하여 여러 명령어를 작성하고 이를 함께 사용하여 그러한 장면을 캡슐화했습니다. 이는 앞서 접했던 컴포넌트 개발 아이디어와는 다르다. 먼저 요구사항과 확장 포인트를 분석해 보겠습니다.

요구사항 분석

1. 은 단일 선택을 실현합니다.

2. 는 모든 선택을 실현합니다.

3. 은 다중 선택 또는 단일 선택을 허용하도록 설정할 수 있습니다. 여러 번 선택하는 경우 최대 선택 수에 제한이 있습니다.

4. 페이지 간 선택이 가능합니다. 여기서 페이지 간 선택은 다음 페이지로 전환한 후에도 이전 페이지의 선택 사항을 계속 기억할 수 있음을 의미합니다. 과거에는 우리가 접한 선택 항목이 현재 페이지만 기억하고 새로 고침하면 삭제되는 경우가 많았습니다. 이것은 다른 곳입니다.

5. UI 및 상호 작용 트리거를 정의해야 합니다.

디자인 아이디어

1. 사실 여기서도 동일한 상호 작용 논리가 있으므로 초점은 같습니다. 이 논리를 캡슐화합니다. 여기의 상호 작용 논리는 주로 다음과 같습니다. 2. 모두 선택하려면 클릭합니다. 3. 목록 항목 선택을 전환하려면 클릭합니다. 단일 선택인 경우 이전 선택을 취소하고, 다중 선택인 경우 최대 선택 제한을 초과했는지 확인합니다.

2. 동일한 적용 시나리오를 다시 살펴보겠습니다. 목록 배열과 선택된 배열을 갖도록 컨텍스트를 설정하겠습니다. 따라서 우리는 다음과 같은 지시를 받습니다.

moSelect 명령

모든 선택 논리를 캡슐화하는 명령입니다. 적용 가능한 시나리오:

1. 목록 컬렉션이 있습니다.

2. 각 항목은

3. 페이지 간 선택입니다.

   1. 주로 3번을 통해 명령은 모두 선택과 관련된 코드 캡슐화를 구현합니다.

2. mo-select는 전체 선택 및 단일 항목 선택 방법을 정의하는 컨테이너 명령이며 목록 컨테이너 dom에 정의됩니다. -select ng-repeat의 항목과 일치하는 범위의 목록 개체입니다.

item-name: 명령에 각 항목의 개체 이름을 알려주고 명령은 각 항목의 범위에서 검색합니다. 이 이름을 통해. ng-repeat의 항목과 일치합니다.

select-all-name: 모든 선택 항목에 대한 상태 변수입니다. 기본값: isSelectedAll

1. item-select-name: 기록된 각 개체의 선택 여부에 대한 변수 이름이 항목 개체에 저장됩니다. 기존 비즈니스 필드와 중복되지 않도록 구성할 수 있습니다.

2. selected-list-name: 선택한 개체 목록의 변수 이름입니다. 기본값: selectedList;

3. init-selected-list: 선택한 개체 목록을 초기화합니다. 이 변수는 vue 구성 요소의 prop 속성과 유사하게 초기화에만 사용됩니다.

4. allow-multiple-select: 다중 선택 허용 여부

5. select-count-limit: 다중 선택이 허용되는 경우 최대 몇개까지 선택할 수 있나요? 통과되지 않으면 무한합니다.

6. item-equal-func: 비즈니스 객체 자체의 평등 원칙을 캡슐화하는 데 사용되는 객체 평등 함수입니다. 예를 들어 일부 시나리오는 ID를 기반으로 하고 일부는 다른 비즈니스 논리를 기반으로 합니다. 통과되지 않은 경우 기본값은 개체의 id 속성을 기반으로 합니다.

7. 3. mo-select-all 명령을 모두 선택합니다. 모두 선택 DOM에 정의된 첫 번째 버전은 입력 확인란입니다. 해당 값은 현재 범위에 저장된 변수 이름이 선택되었는지 여부를 나타냅니다.

   4. 각 돔에 정의되어 있습니다. 두 위치가 있을 수 있습니다.

8. 는 사용자 입력 상자에 정의되고

9. 은 입력 컨테이너에 정의됩니다. tr과 마찬가지로 전체 행을 선택하려면 클릭하세요. 단일 요소에 대해 정의할 수도 있습니다.

선택한 옵션을 가져오려면 현재 범위에서 selected-list-name으로 지정된 변수 이름을 가져오세요.

사용 단계:
2. 컨테이너에서 mo-select를 정의하고 실제 필요에 따라 관련 매개변수를 구성합니다. 필수: mo-select, item-name;

매개변수를 구성하지 않고 선택해야 하는 버튼 돔에 mo-select-all 지시문을 추가합니다.

ng-repeat의 단일 항목 템플릿에서 , 단일 선택 상호 작용을 추가해야 하는 DOM에 mo-select-single 지시문을 추가합니다. 매개변수를 구성할 필요가 없습니다.

1. 구성을 완료합니다.

2. Notes

3. mo-select는 ng-repeat 항목과 일치해야 합니다.

4. item-name은 ng-repeat 항목과 일치해야 합니다.

요약

이러한 지침은 여전히 ​​비즈니스 개발에 사용하기에 매우 유연합니다. 구성 항목이 다소 번거로워 보일 수도 있지만 실제로는 대부분 기본값을 사용할 수 있습니다. 다양한 표현을 살펴보겠습니다.





코드는 200줄 정도로 많지 않습니다. 그다지 복잡하지 않기 때문에 데모를 하지 않았습니다. 여기에 코드 링크를 통해 공유하겠습니다. 개선에 관심이 있는 학생은 이를 받아들이고 마음대로 변경할 수 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

스크롤러를 구현하는 방법 페이지로 돌아가고 vue에서 스크롤 위치를 기억하는 방법

vue에서 딥 카피를 보는 방법

JavaScript에서 쿠키 읽기 및 쓰기를 구현하는 방법

방법 Pace.js 및 NProgress.js와 함께 로딩 진행 플러그인을 사용하는 방법(상세 튜토리얼)

WeChat 애플릿의 앱 수명 주기 정보(상세 튜토리얼)

NProgress.js 로딩 사용 정보 jQuery의 진행 플러그인

위 내용은 목록을 구현하는 방법은 각도에서 모든 대화형 구성 요소를 선택합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!