Monaca Onsen UI Discord Chat Github Repo

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