AngularJS의 Ng 옵션

Rana Hasnain Khan 2024년2월15일

Angular Angular ng-options

이 튜토리얼에서는 ng-options와 이를 사용하여 AngularJS를 사용하여 선택 항목을 표시하는 방법에 대해 설명합니다.

AngularJS에서 `ng-options` 사용

ng-options는 옵션이 있는 HTML 요소를 빌드하고 모델 속성에 바인딩하는 데 사용됩니다. ng-options를 사용하여 선택 목록에서 옵션을 지정합니다.

ng-options는 드롭다운 목록의 항목을 채우도록 특별히 설계되었습니다. 옵션을 채우는 데 ng-options를 사용하는 드롭다운을 만드는 예제를 살펴보겠습니다.

먼저 script 태그를 사용하여 AngularJS 라이브러리와 app.js 파일을 추가합니다.

# AngularJS
<head>
    <script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <script src="app.js"></script>
  </head>

ng-app을 사용하여 AngularJS 애플리케이션을 정의하고 ng-controller를 사용하여 컨트롤러를 정의합니다.

# AngularJS
<body ng-app="myApp">
    <div ng-controller="myController"></div>
  </body>

이제 app.js에서 모듈을 생성합니다.

# AngularJS
var app = angular.module('myApp', []);

어레이 selectedItem을 정의하는 컨트롤러를 만들고 app.js의 옵션에 대한 어레이에 할당된 값을 추가합니다.

# AngularJS
app.controller('myController', function($scope) {

  $scope.lists = [];
  $scope.selectedItem = { name: 'second', id: 5 };
  $scope.lists = [{name: 'first', id: 3 },{ name: 'second', id: 5 },{ name: 'third', id: 7 }];

});

마지막으로 애플리케이션의 프런트엔드를 생성합니다.

# AngularJS
    <p>selected item is : {{selectedItem}}</p>
    <p> name of selected item is : {{selectedItem.name}} </p>
    <select ng-model="selectedItem" ng-options="list.name for list in lists track by list.id"></select>

출력:

angularjs의 ng 옵션 예제

ng-options를 사용하는 위의 예에서 선택에서 옵션 목록을 표시하는 것은 매우 쉽습니다. 사용자가 항목을 선택할 때 항목을 선택하도록 코드를 추가로 작성할 필요가 없습니다.

작가: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

AngularJS에서 ng-options 사용

AngularJS에서 `ng-options` 사용