monaca에서 스마트 폰 앱을 만들자 #4

동적으로 목록 생성

디자인은 알았다. 다음은 구현이다.
그래서 동적으로 목록을 생성해 보겠습니다.

생성된 Page1Controller.js에 배열 정의

Page1Controller.js

app.controller('Page1Ctrl',function($scope){
    $scope.oss= [
        {"name":"KiKat", "kind":"android", "desc":"androidos4.4系です"},
        {"name":"JellyBean", "kind":"android", "desc":"androidos4.1-3系です"},
        {"name":"Honycomb", "kind":"android","desc":"androidos3.x系です"},
        {"name":"Mavericks", "kind":"osx","desc":"Mac 10.9"},
        {"name":"Mountain Lion", "kind":"osx", "desc":"Mac 10.8"},
        {"name":"Lion", "kind":"osx","desc":"Mac 10.7"},
        {"name":"SnowLeopard", "kind":"osx", "desc":"Mac 10.6"},
        ];
}) ;

page1.html 수정

page1.html

<ons-page>
<div ng-controller="Page1Ctrl">
  <ons-toolbar>
    <div class="center">List With Header</div>
  </ons-toolbar>

  <ons-list>
    <ons-list-header>Versions</ons-list-header>

    <ons-list-item modifier="chevron" ng-repeat="os in oss">
    {{os.name}}
    </ons-list-item>
  </ons-list>
</div>
</ons-page>

추가 수정

page1.html

<ons-page>
<div ng-controller="Page1Ctrl">
  <ons-toolbar>
    <div class="center">List With Header</div>
  </ons-toolbar>

  <ons-list>
    <ons-list-header>Android Versions</ons-list-header>
    <ons-list-item modifier="chevron" ng-repeat="os in oss" ng-if="os.kind == 'android'">
    {{os.name}}
    </ons-list-item>

    <ons-list-header>MacOSX Versions</ons-list-header>
    <ons-list-item modifier="chevron" ng-repeat="os in oss" ng-if="os.kind == 'osx'">
    {{os.name}}
    </ons-list-item>


  </ons-list>
</div>
</ons-page>

이제 정적 코드와 디스플레이와 동일합니다.

Reference

이 문제에 관하여(monaca에서 스마트 폰 앱을 만들자 #4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/furu8ma/items/37f9d9b9100fac0561b2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다