Angularjs ng-Repeat 지침
AngularJS 인스턴스
여러 타이틀을 루프합니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp" ng-controller = "myctrl"> <h1 ng-repeat = "x in records"> {{x}} </h1> <cript> var app = angular.module ( "myapp", []); app.controller ( "myctrl", function ($ scope.records = "Solokie 2" "" "" "" "" "" "" "" "" "" "" "" " "신인 튜토리얼 3", "신인 튜토리얼 4",]}); </script> </body> </html>정의 및 사용법
NG- 반복 지시문은 지정된 횟수의 HTML 요소를 루프하는 데 사용됩니다.
컬렉션은 배열 또는 객체 여야합니다.
문법
<요소 ng-repeat = "expression"> </element>
모든 HTML 요소는이 지침을 지원합니다.
매개 변수 값
| 값 | 설명하다 |
|---|---|
| 표현 | 표현식 컬렉션을 루프하는 방법을 정의합니다. 표현 인스턴스 규칙 : 레코드의 x myobj에서 (키, 가치) x는 $ id (x)에 의해 레코드 트랙에 있습니다. |
더 많은 예
AngularJS 인스턴스
배열을 사용하여 테이블을 루프하십시오.
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp"> <테이블 ng-controller = "myctrl"> <tr ng-repeat = "x in Records"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> <cript> var app = angular.module ( "myapp", app.controller ", function ($ scope) {$ scope.records = [{ "name": "Alfreds futterkiste", "Country": "독일"}, { "name": "berglunds snabbk", "country": "sweden"}, { "name": "Centro Comercial Moctezuma", "Country", " ^", "eN,"멕시코 "," Handel ","Country ":"Austria "}]}); </script> </body> </html>실행 결과 :
| Alfreds Futterkiste | 독일 |
| Berglunds snabbk | 스웨덴 |
| Centro Comercial Moctezuma | 멕시코 |
| Ernst Handel | 오스트리아 |
AngularJS 인스턴스
객체를 사용하여 루프를 사용하여 테이블을 출력하십시오.
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp"> <테이블 ng-controller = "myctrl"> <tr ng-repeat = "(x, y) in myobj"> <td> {{x}} </td> <td> {{y}} </td> </tr> </table> <cript> var app = angular.module ( "myapp", app.contoller ", function ($ scope) {$ scope.myobj = { "name": "Alfreds futterkiste", "Country": "독일", "City": "Berlin"}}); </script> </body> </html>실행 결과 :
| 이름 | Alfreds Futterkiste |
| 국가 | 독일 |
| 도시 | 베를린 |
위의 것은 Angularjs ng-repeat 지침을 분류하는 기본 정보이며 나중에 보충됩니다.