Problem is Tab and content.

Thanh Hai Lai Ho

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?
how is the difference between “$(”.modal").show();" and “modal.show();” ?, when i using modal.show() , console eror

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 **

Fran Diox

@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.

Thanh Hai Lai Ho

@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
Thank you so much Fran

Problem is Tab and content. browsing