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
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 © 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:
-
@Thanh-Hai-Lai-Ho You are bootstrapping the app twice. First with
ons.bootstrap()
and later withangular.module('schedule',[])
. Read more aboutons.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