Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. puku0x
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    puku0x

    @puku0x

    🐶Frontend engineer, ng-fukuoka organizer, Onsen UI collaborator, 🎓Ph.D. in Engineering.

    0
    Reputation
    3
    Posts
    701
    Profile views
    1
    Followers
    0
    Following
    Joined Last Online
    Website github.com/puku0x Location Fukuoka, Japan

    puku0x Follow

    Posts made by puku0x

    • RE: Ionic Support

      You can create an Ionic project by following procedure.

      1. Click “Create New Project”
      2. Click “Framework Templates”
      3. Select “Angular” (not “AngularJS”)
      4. Select “Ionic 3 + Angular 5 Starter”
      5. Click “Create Project”

      You may need to modify monaca:preview script in package.json to preview the app.

      "scripts": {
          "ionic:serve": "ionic-app-scripts serve",
          "monaca:preview": "npm run ionic:serve -- --port 8080",
      },
      

      You should reload the preview tab every time you build because it seems not support live reload.

      Hope it helps,
      puku0x

      posted in Developer Corner
      puku0x
    • RE: Onsen + Angular with "ons-select" on change

      Considering the data structure, it is needed to add a key for the array in selectedValue.

      valuesList = [
        {
          name: 'foo',
          items: [
            { id: 1, title: 'title001', message: 'msg001', value: 'value001'},
            { id: 2, title: 'title002', message: 'msg002', value: 'value002'},
            { id: 3, title: 'title003', message: 'msg003', value: 'value003'},
          ]
        },
        {
          name: 'bar',
          items: [
            { id: 4, title: 'title004', message: 'msg004', value: 'value004'},
            { id: 5, title: 'title005', message: 'msg005', value: 'value005'},
            { id: 6, title: 'title006', message: 'msg006', value: 'value006'},
          ]
        }
      ];
      
      selectedValue = this.valuesList[0];
      

      Moreover, I don’t recommend to use ons-select with [ngValue] because it supports only string currently.

      <select class="select-input" [(ngModel)]="selectedValue">
        <option *ngFor="let value of valuesList" [ngValue]="value">
          {{ value.name }}
        </option>
      </select>
      
      <ons-list>
        <ons-list-item *ngFor="let item of selectedValue.items">
          <h2>{{item.title}}</h2>
          <p>{{item.message}}{{item.value}}</p>
        </ons-list-item>
      </ons-list>
      

      Here’s a live demo.
      https://stackblitz.com/edit/ngx-onsenui-topic-3319

      Cheers,
      puku0x

      posted in Onsen UI
      puku0x
    • RE: <ons-navigator>、<ons-splitter>、<ons-tab>の入れ子は可能でしょうか?

      入れ子はこんな感じでしょうか?

        <ons-navigator>
          <ons-splitter>
            <ons-tab>

      私も試したことはありますが、最新版ではうまく動きませんでした。
      (v2.0.0 RC.17では動きました)

      posted in Onsen UI
      puku0x