AngularJS에서 체크박스 목록 만들기
이 튜토리얼은 AngularJS에서 간단한 체크박스 목록을 만드는 방법을 보여줄 것입니다. ng-repeat 지시문을 사용하여 selected라는 속성을 포함하는 객체 배열을 반복합니다.
또한 ng-model을 사용하여 배열에 있는 각 개체의 선택한 속성을 확인란 입력에 바인딩합니다.
Angular 확인란 목록을 만드는 단계
다음 단계는 Angular 확인란 목록을 만드는 방법을 안내합니다.
-
새 AngularJS 프로젝트를 만듭니다.
-
컨트롤러에 데이터를 추가합니다.
-
목록 항목을 컨트롤러에 추가하고
ng-repeat지시문을 추가합니다. -
HTML 파일에 체크박스 목록을 추가하고
ng-model지시문을 추가합니다. -
컨트롤러의 항목을 반복하고 선택 여부를 확인한 다음 그에 따라 표시하거나 숨길 수 있는 기능을 만듭니다.
Angular 체크박스 목록을 만드는 데 도움이 되는 예를 살펴보겠습니다.
Angular 앱 빌드를 시작하려면 개발 환경을 설정해야 합니다. 이를 위해 NodeJS와 Angular CLI 도구를 우리 시스템에 전역적으로 설치할 것입니다.
이렇게 하려면 다음 명령을 실행합니다.
$ng new angular-checkbox-list-app
그런 다음 JavaScript와 HTML 코드를 작성해 보겠습니다.
자바스크립트 코드:
angular.module('sam', ['checklist-model'])
.controller('demo', function($scope) {
$scope.countryList = [
{ name: 'America'},
{ name: 'England'},
{ name: 'Canada'},
{ name: 'Scotland'}
];
$scope.selected = {
country: []
};
});
HTML 코드:
<div ng-app="sam">
<div ng-controller="demo">
<h2>
Example of Angular Checkbox List
</h2>
<label ng-repeat="country in countryList"><input type="checkbox" checklist-model="selected.country" checklist-value="country" /> {{country.name}}<br/> </label>
<br/>
<p>
Selection will show here
</p>
{{selected.country}}
</div>
</div>
출력:
이 예에서는 일부 국가의 목록을 작성했으며 주로 ng-repeat를 사용했습니다. 테이블, 목록 또는 다른 UI 구성 요소의 데이터를 표시하는 데 사용됩니다.
또한 사용하기 쉽고 직관적이며 많은 사용자 정의를 제공합니다. 마지막으로 Angular 확인란 목록에서 전체 코드를 손상시키지 않고 항목을 쉽게 추가하거나 제거할 수 있습니다. 그것은 당신의 필요에 따라 목록을 유연하게 만듭니다.
여기를 클릭 위 코드의 라이브 데모를 확인하십시오.
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