Problem is Tab and content.



  • Hi every body and @Fran Diox !!!
    Can U help me, pls ?
    Now, I have “segment-control” and 2 div.content.
    So, with one simple tabs Jquery like this, it’s ok? :blush:
    how is the difference between “$(”.modal").show();" and “modal.show();” ?, when i using modal.show() , console eror
    0_1459746932675_abc.png
    and $(".modal").show(); is ok ?

    <!doctype html>
    <html ng-app="schedule">
    <meta charset="utf-8">
    <title>test.com</title>
    <link rel="stylesheet" href="../bower_components/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="../bower_components/onsenui/css/onsen-css-components.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="my.css">
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/onsenui/js/onsenui.js"></script>
    <script src="../bower_components/onsenui/js/angular-onsenui.js"></script>
    <script>
      ons.bootstrap();
    </script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="my.js"></script>
    <body ng-controller="ScheduleController as schedule">
    <ons-pages id="schedule-page">
      <ons-toolbar>
        <div class="left">
            <i class="fa fa-angle-left ml10"></i>  Back
        </div>
        <div class="center">TITLE</div>
        <div class="right">
            <ul class="clearfix">
            
            <li id="show-modal01">show Modal</li>
          </ul>
        </div>
      </ons-toolbar>
      <!-- end ons-toolbar -->
    
    <div class="navigation-bar segment-control clearfix">
          <div class="navigation-bar__center">
            <!-- segment control -->
            <div class="button-bar">
              <div class="button-bar__item">
                <input type="radio" name="navi-segment-a" checked>
                <div class="button-bar__button">A</div>
              </div>
              <div class="button-bar__item">
                <input type="radio" name="navi-segment-a">
                <div class="button-bar__button">b</div>
              </div>
            </div>
          </div>
        </div>
        <!-- end navigation-bar -->
      
      <div class="content">
        <div class="schedule" ng-repeat="info in schedule.information">
            <ons-row class="sche_row mb15 clearfix">
            <ons-col><i class="fa fa-building-o"></i>{{info.sc_building}}</ons-col>
          </ons-row>
          <ons-row class="sche_row mb15 clearfix">
            <ons-col><i class="fa fa-arrow-circle-o-up"></i>{{info.sc_access}}</ons-col>
            <ons-col><i class="fa number fa-file-o"></i>{{info.sc_id}}</ons-col>
            <ons-col><i class="fa fa-truck"></i>{{info.sc_flood}}</ons-col>
          </ons-row>
          <ons-row class="sche_row mb15 clearfix">
            <ons-col><i class="fa fa-truck"></i>{{info.sc_bus}}</ons-col>
            <ons-col><i class="fa fa-trash-o"></i>{{info.sc_bin}}</ons-col>
          </ons-row>
          <ons-row class="sche_row mb15 clearfix">
            <ons-col><i class="fa fa-industry"></i>{{info.sc_analytics}} </ons-col>
          </ons-row>
          <ons-row class="sche_row mb15 clearfix">
            <ons-col><i class="fa fa-calendar"></i>{{info.sc_calendar}}</ons-col>
            <ons-col><i class="fa number fa-file-o"></i>{{info.sc_number}}</ons-col>
          </ons-row>
          <ons-row class="sche_row">
            <ons-col>
                <dl class="tb-info clearfix">
                <dt><span class="icon icon_bikou"></span>Remark</dt>
                <dd>{{info.sc_mark}}</dd>
              </dl>
            </ons-col>
          </ons-row>
        </div>
        <!-- end schedule -->
      </div>
      <!-- end content -->
    
     <div class="content hidden">
       This is Content B
    </div>
      <!-- end content -->
      
      <ons-bottom-toolbar class="bottom-bar footer-bar">
        <div class="bottom-bar__line-height">
            <ons-row class="pl25 pr25">
            <ons-col>
              <button class="button">back</button>
            </ons-col>
            <ons-col>
              <ul class="f-control">
                <li data-tags="menu" data-pack="ios" class="ion-ios-more"></li>
                <li data-tags="add, include, new, invite, +" data-pack="ios" class="ion-ios-plus-empty"></li>
              </ul>    
            </ons-col>
          </ons-row>
        </div>
      </ons-bottom-toolbar>
      <!-- end bottom-bar -->
      
      <div id="footer" class="layer-foot">
        <p id="copyright">Copyright &copy; test.com, Inc. All Rights Reserved.</p>
      </div>
      <!-- end footer -->
    </ons-pages>  
    
    <ons-modal var="modal" class="modal">
      <div class="modal_inner">
        abc
      </div>
    </ons-modal>
    <!--End Modal-->
    </body>
    </html>
    

    And now my.js

    $(function() {
        $("#show-modal01").click(function() {
            $(".modal").show();
        });
        $("#close_modal01").click(function() {
            $(".modal").hide();
        });
        
        $(".button-bar .button-bar__item").click(function() {
            var num = $(".button-bar .button-bar__item").index(this);
            $(".content").hide();
            $(".content").eq(num).show();
            $(".button-bar .button-bar__item").removeClass('select');
            $(this).addClass('select');
        });
        
    });
    
    (function (){
        var app = angular.module('schedule',[]);
        app.controller('ScheduleController',function(){
            this.information = gems;                                          
        }); 
        var gems = [
            { 
                sc_building: 'xxxx', 
                sc_access: 'xxxx', 
                sc_id: 'xxxx',
                sc_flood: '9',
                sc_bus: 'xxxx',
                sc_bin: 'xxxx', 
                sc_analytics: 'xxxx',
                sc_calendar: 'xxxx',
                sc_number: '123456789012345678901234567890',
                sc_mark: '空白'
            },
            { 
                sc_building: 'xxxx', 
                sc_access: 'xxxx', 
                sc_id: 'xxxx',
                sc_flood: '9',
                sc_bus: 'xxxx',
                sc_bin: 'xxxx', 
                sc_analytics: 'xxxx',
                sc_calendar: 'xxxx',
                sc_number: '123456789012345678901234567890',
                sc_mark: '空白'
            }
        ];
    
    })();
    

    **
    Please comment on my code !!!** :grinning:


  • Onsen UI

    @Thanh-Hai-Lai-Ho You are bootstrapping the app twice. First with ons.bootstrap() and later with angular.module('schedule',[]). Read more about ons.bootstrap here. Try changing that and see if it fixes your issue.



  • @Fran-Diox
    var app = angular.module(‘schedule’,[‘onsen’]);
    app.controller(‘ScheduleController’,function(){
    this.information = gems;
    });
    And after i remove

    <script>
      ons.bootstrap();
    </script>
    

    All have been resolved :laughing:
    Thank you so much !!! Fran


Log in to reply