使用 onsen ui 段控件在当前页面中打开页面

Question

我正在我的应用程序中使用段控制，但我无法在段之间切换。

我指的是这个linkhttps://onsen.io/pattern-schedule.html

我已经尝试并搜索了很多但找不到任何解决方案。

我的输出：

我的代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"/>
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="css/onsenui.css">
<link rel="stylesheet" href="css/onsen-css-components.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/angular/angular.js"></script>
 <script src="js/angular/angular.min.js"></script>
<script src="js/onsenui.js"></script> 
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>js"></script>

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

<ons-navigator animation="slide" title="Navigator" var="menu">
 <ons-page var ="variable">
    <ons-toolbar>
      <div class="left">
      </div>
      <div class="center">
        Menu
      </div>
      <div class="right">
        <ons-toolbar-button>
          <ons-icon icon="ion-plus" fixed-width="false" style="vertical-  
             align: -4px;"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>


  <div class="navigation-bar">
      <div class="navigation-bar__center">


        <div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">

          <div class="button-bar__item" ngclick="menu.setMainPage('indian.html')">
            <input type="radio" name="navi-segment-a" checked>
            <div class="button-bar__button">Indian</div>
          </div>

          <div class="button-bar__item" ngclick="menu.setMainPage('english.html')">
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">English</div>
          </div>

           <div class="button-bar__item" ngclick="menu.setMainPage('drinks.html')"> 
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">Drinks</div>
          </div>

        </div>

      </div>
 </div>

 </ons-page>
</ons-navigator>

<ons-template id="indian.html">

 <ons-page>
  <div>
    Hello, this is the content of drinks.html
  </div>
 </ons-page>
</ons-template>

<ons-template id="english.html">

<ons-page>
 <div>
   Hello, this is the content of drinks.html
 </div>
</ons-page>
</ons-template>

<ons-template id="drinks.html">
<ons-page>
 <div>
   Hello, this is the content of drinks.html
 </div>
</ons-page>
</ons-template>

提前致谢。

编辑：

我的要求是我想打开模板，即 indian.html 、english.html 和 drinks.html 在同一页面上段控件分别单击像 splitview确实

我在用温泉1

我没有使用滑动菜单。

更新：我现在收到这个错误...

 04-11 04:58:06.471 14813-14851/com.hogo.onsenui E/AndroidProtocolHandler:    
 Unable to open asset URL: file:///android_asset/www/english.html
 04-11 04:58:06.501 14813-14813/com.hogo.onsenui I/chromium:   
 [INFO:CONSOLE(108)] "Error: Page is not found: english.html
                                                            at  
  file:///android_asset/www/js/onsenui.js:13828:17
                                                            at  
  file:///android_asset/www/js/angular/angular.min.js:120:182
                                                            at n.$eval  
  (file:///android_asset/www/js/angular/angular.min.js:134:493)
                                                            at n.$digest 

  (file:///android_asset/www/js/angular/angular.min.js:132:9)
                                                            at n.$apply 
  (file:///android_asset/www/js/angular/angular.min.js:135:269)
                                                            at l 
  (file:///android_asset/www/js/angular/angular.min.js:87:152)
                                                            at F 
  (file:///android_asset/www/js/angular/angular.min.js:91:187)
                                                            at 
   XMLHttpRequest.e  
   (file:///android_asset/www/js/angular/angular.min.js:92:271)", source: 
   file:///android_asset/www/js/angular/angular.min.js (108)

更新代码：

 <body>
   <ons-tabbar var="navi" position="top">
   <ons-tab page="indian.html" active="true"></ons-tab>
   <ons-tab page="english.html"></ons-tab>
   <ons-tab page="drinks.html"></ons-tab>
   </ons-tabbar>


<ons-toolbar>
      <div class="left">
      </div>
      <div class="center">
        Menu
      </div>
      <div class="right">
        <ons-toolbar-button>
          <ons-icon icon="ion-plus" fixed-width="false" style="vertical-  
                align: -4px;"></ons-icon>
        </ons-toolbar-button>
      </div>
  </ons-toolbar>

 <ons-page>
    <div class="navigation-bar">
      <div class="navigation-bar__center">

        <div class="button-bar" style="width:100%;right:8px; margin:8px; 
             padding: 0px 5px;">

          <div class="button-bar__item" ng-click="navi.setActiveTab(0)">
            <input type="radio" name="navi-segment-a" checked>
            <div class="button-bar__button">Indian</div>
          </div>

          <div class="button-bar__item" ng-click="navi.setActiveTab(1)">
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">English</div>
          </div>

           <div class="button-bar__item" ng-click="navi.setActiveTab(2)"> 
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">Drinks</div>
          </div>

          </div>

         </div>
       </div>
    </ons-page>


<ons-template id="indian.html">

 <ons-page>

  <p style="text-align: center; color: #999; padding-top: 100px;">
    english Contents
  </p>
   </ons-page>

 </ons-template>

<ons-template id="english.html">

  <ons-page>

  <p style="text-align: center; color: #999; padding-top: 100px;">
    english Contents
  </p>
  </ons-page>

 </ons-template>

<ons-template id="drinks.html">

  <ons-page>

  <p style="text-align: center; color: #999; padding-top: 100px;">
    drinks Contents
  </p>
  </ons-page>

 </ons-template>

  </body>

我在 css 页面中隐藏了标签栏

Answer 1

有几个问题可能会阻止程序运行：

您包含 angular 两次
```
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular.min.js"></script>
```
这可能不是您问题的原因，但它可能会导致其他问题 - 两个文件中的一个就足够了。
```
<script type="text/javascript" src="js/index.js"></script>js"></script>
```
这也不应该成为问题，但像这样的标签可能会导致问题 - 当您有额外的结束标签时没问题，但如果您有额外的开放标签，那么整个页面可能是空白的。
属性应该是ng-click，不是ngclick。
如果您想使用 ons-navigator，那么您可以使用的方法是 pushPage, popPage, replacePage。您使用的 setMainPage 方法是 ons-sliding-menu.

如果你想过滤数据，那么你应该：

将 ng-controller="AppController" 添加到正文或其他父元素。
将 ng-model="a" 添加到单选按钮（我猜是一些值）。
将项目添加到控制器中的 $scope。
添加 ng-repeat="item in items | filter: { category: category }" 或类似内容

所以像这样：

<div class="navigation-bar">
  <div class="navigation-bar__center">
    <div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">
      <div class="button-bar__item">
        <input type="radio" name="navi-segment-a" ng-model="a" value="indian" checked>
        <div class="button-bar__button">Indian</div>
      </div>
      <div class="button-bar__item">
        <input type="radio" name="navi-segment-a" ng-model="a" value="english">
        <div class="button-bar__button">English</div>
      </div>
       <div class="button-bar__item"> 
        <input type="radio" name="navi-segment-a" ng-model="a" value="drinks">
        <div class="button-bar__button">Drinks</div>
      </div>
    </div>
  </div>
</div>

<ons-list ng-repeat="item in items | filter: { category: category }">
    <ons-list-item>{{item.name}} ...</ons-list-item>
</ons-list>

对于javascript：

ons.bootstrap().controller('AppController', function ($scope) {
  $scope.a = "indian";
  $scope.items = [ // put your items here
    name: 'item 1', category: 'indian',
    name: 'item 2', category: 'indian',
    name: 'item 3', category: 'english',
    name: 'item 4', category: 'english',
    name: 'item 5', category: 'drinks',
    name: 'item 6', category: 'drinks'
  ]
});

更新： 我以为你想要过滤。如果其他人对此感兴趣，我会留下以前的答案。现在更新问题的答案：

在那种情况下，您似乎想要的正是 ons-tabbar 的功能 - 您有选项卡和选项卡内容 - 正是您想要的。所以你只想为选项卡设置不同的样式。

然而，以这种方式设置它们的样式可能并不简单，而且如果您尝试更新版本，样式可能会中断。因此，我将提供另外 2 个不需要高级 css 技巧的解决方案：

使用标签栏，但只是隐藏它和link来自您的段控件的操作：

<div class="button-bar">
  <div class="button-bar__item" ng-click="navi.setActiveTab(0)">
    <input type="radio" name="navi-segment-a" checked>
    <div class="button-bar__button">Indian</div>
  </div>
  ...
  <div class="button-bar__item" ng-click="navi.setActiveTab(2)">
    <input type="radio" name="navi-segment-a">
    <div class="button-bar__button">Drinks</div>
  </div>
</div>

<ons-tabbar var="navi" position="top">
  <ons-tab page="indian.html" active="true"></ons-tab>
  <ons-tab page="english.html"></ons-tab>
  <ons-tab page="drinks.html"></ons-tab>
</ons-tabbar>

CSS: #navi .tab-bar { display: none; }

如果要更改页面，只需使用导航器即可。
- <ons-navigator page="indian.html" id="navi"></ons-navigator>
- 将 ng-click="navi.replacePage('pagename.html')" 添加到 .button-bar__item
- 在导航器的顶部添加一些距离#navi { top: 40px; }

使用 onsen ui 段控件在当前页面中打开页面

Open page within current page using onsen ui segment control

onsen-ui