Angularjs 使用集合重复与离子侧菜单_Angularjs_Ionic Framework

Angularjs 使用集合重复与离子侧菜单

angularjs ionic-framework

Angularjs 使用集合重复与离子侧菜单,angularjs,ionic-framework,Angularjs,Ionic Framework,我正在尝试在一个使用离子侧菜单的应用程序中使用一个集合重复列表。当我不使用菜单时，收集重复似乎有效。当我使用菜单时，集合repeat不会在屏幕上显示任何内容（尽管我可以在浏览器开发工具中看到它添加到页面中的项目）这两种离子元素彼此不相容吗以下是两个例子：没有离子侧菜单（工作）收藏重复：早期预览 .list.my-item.item{ 左：0；右：0；填充顶部：0；填充底部：0； } 3000个联系人角度模块（'contactsApp'，['ionic']）） .controll

我正在尝试在一个使用离子侧菜单的应用程序中使用一个集合重复列表。当我不使用菜单时，收集重复似乎有效。当我使用菜单时，集合repeat不会在屏幕上显示任何内容（尽管我可以在浏览器开发工具中看到它添加到页面中的项目）

这两种离子元素彼此不相容吗

以下是两个例子：

没有离子侧菜单（工作）


收藏重复：早期预览
.list.my-item.item{
左：0；
右：0；
填充顶部：0；
填充底部：0；
}
3000个联系人
角度模块（'contactsApp'，['ionic']））
.controller（'MainCtrl'，函数（$scope，$ionicScrollDelegate，filterFilter）{
$scope.contacts=window.contacts；
$scope.getItemHeight=函数（项）{return 100；}；
});
window.CONTACTS=[{“id”：1，“名”：“帕特里克”，“姓”：“罗杰斯”，“国家”：“塞浦路斯”，“ip地址”：“153.88.89.148”，“电子邮件”：progers@yata.net"},
{“id”：2，“名字”：“珍妮特”，“姓氏”：“戈登”，“国家”：“克罗地亚”，“ip地址”：“209.73.121.212”，“电子邮件”：jgordon@skivee.biz"},
{“id”：3，“名字”：“凯西”，“姓氏”：“汉密尔顿”，“国家”：“亚美尼亚”，“ip地址”：“164.214.217.162”，“电子邮件”：khamilton@rhynyx.biz"},
{“id”：4，“名字”：“斯蒂芬妮”，“姓氏”：“约翰逊”，“国家”：“毛里求斯”，“ip地址”：“8.199.242.67”，“电子邮件”：sjohnson@jabbertype.mil"},
{“id”：5，“名字”：“杰瑞”，“姓氏”：“帕尔默”，“国家”：“泰国”，“ip地址”：“230.207.100.163”，“电子邮件”：jpalmer@avamm.org"},
{“id”：6，“名字”：“莉莉安”，“姓氏”：“富兰克林”，“国家”：“德国”，“ip地址”：“150.190.116.1”，“电子邮件”：lfranklin@eare.mil"},
{“id”：7，“名字”：“梅丽莎”，“姓氏”：“戈登”，“国家”：“塞尔维亚”，“ip地址”：“162.156.29.99”，“电子邮件”：mgordon@flashset.org"},
{“id”：8，“名字”：“莎拉”，“姓氏”：“伯恩斯”，“国家”：“格林纳达”，“ip地址”：“13.177.156.223”，“电子邮件”：sburns@eimbee.info"},
{“id”：9，“名字”：“威利”，“姓氏”：“伯顿”，“国家”：“克罗地亚”，“ip地址”：“115.133.81.82”，“电子邮件”：wburton@dynazzy.info"},
{“id”：10，“名字”：“蒂娜”，“姓氏”：“西蒙斯”，“国家”：“美属维尔京群岛”，“ip地址”：“113.49.63.18”，“电子邮件”：tsimmons@devpulse.mil"},
{“id”：11，“名字”：“肯尼斯”，“姓氏”：“拉尔森”，“国家”：“墨西哥”，“ip地址”：“92.89.76.196”，“电子邮件”：klarson@browseblab.info"},
{“id”：12，“名字”：“菲利普”，“姓氏”：“韦尔奇”，“国家”：“古巴”，“ip地址”：“223.180.48.70”，“电子邮件”：pwelch@skippad.edu"},
{“id”：13，“名字”：“尼古拉斯”，“姓氏”：“帕克”，“国家”：“英属印度洋领土”，“ip地址”：“200.150.119.13”，“电子邮件”：nparker@twitternation.net"},
{“id”：14，“名字”：“妮可”，“姓氏”：“韦伯”，“国家”：“摩尔多瓦”，“ip地址”：“47.66.237.205”，“电子邮件”：nwebb@midel.biz"},
{“id”：15，“名字”：“克拉伦斯”，“姓氏”：“施密特”，“国家”：“中国”，“ip地址”：“134.84.246.67”，“电子邮件”：cschmidt@dazzlesphere.net"},
{“id”：16，“名字”：“杰西卡”，“姓氏”：“莫里”，“国家”：“圣多美和普林西比”，“ip地址”：“211.30.32.109”，“电子邮件”：jmurray@jumpxs.net"},
{“id”：17，“名字”：“威利”，“姓氏”：“施密特”，“国家”：“美国小离岛”，“ip地址”：“158.40.109.208”，“电子邮件”：wschmidt@babbleset.edu"},
{“id”：18，“名字”：“玛格丽特”，“姓氏”：“埃文斯”，“国家”：“不丹”，“ip地址”：“252.123.77.101”，“电子邮件”：mevans@voolia.info"},
{“id”：19，“名字”：“亚瑟”，“姓氏”：“莫拉莱斯”，“国家”：“法罗群岛”，“ip地址”：“116.5.126.29”，“电子邮件”：amorales@brainlounge.biz"},
{“id”：20，“名字”：“查尔斯”，“姓氏”：“佩雷斯”，“国家”：“意大利”，“ip地址”：“10.43.255.4”，“电子邮件”：cperez@avaveo.net"}];

带有离子侧菜单（不工作）


收藏重复：早期预览
.list.my-item.item{
左：0；
右：0；
填充顶部：0；
填充底部：0；
}
3000个联系人
这是配菜。
角度模块（'contactsApp'，['ionic']））
.controller（'MainCtrl'，函数（$scope，$ionicScrollDelegate，filterFilter）{
$scope.contacts=window.contacts；
$scope.getItemHeight=函数（项）{return 100；}；
});
window.CONTACTS=[{“id”：1，“名”：“帕特里克”，“姓”：“罗杰斯”，“国家”：“塞浦路斯”，“ip地址”：“153.88.89.148”，“电子邮件”：progers@yata.net"},
{“id”：2，“名字”：“珍妮特”，“姓氏”：“戈登”，“国家”：“克罗地亚”，“ip地址”：“209.73.121.212”，“电子邮件”：jgordon@skivee.biz"},
{“id”：3，“名字”：“凯西”，“姓氏”：“汉密尔顿”，“国家”：“亚美尼亚”，“ip地址”：“164.214.217.162”，“电子邮件”：khamilton@rhynyx.biz"},
{“id”：4，“名字”：“斯蒂芬妮”，“姓氏”：“约翰逊”，“国家”：“毛里求斯”，“ip地址”：“8.199.242.67”，“电子邮件”：sjohnson@jabbertype.mil"},
{“id”：5，“名字”：“杰瑞”，“姓氏”：“帕尔默”，“国家”：“泰国”，“ip地址”：“230.207.100.163”，“电子邮件”：jpalmer@avamm.org"},
{“id”：6，“名字”：“莉莉安”，“姓氏”：“富兰克林”，“国家”：“德国”，“ip地址”：“150.190.116.1”，“电子邮件”：lfranklin@eare.mil"},
{“id”：7，“名字”：“梅丽莎”，“姓氏”：“戈登”，“国家”：“塞尔维亚”，“ip地址”：“162.156.29.99”，“电子邮件”：mgordon@flashset.org"},
{“id”：8，“名字”：“莎拉”，“姓氏”：“伯恩斯”，“国家”：“格林纳达”，“ip地址”：“13.177.156.223”，“电子邮件”：sburns@eimbee.info"},
{“id”：9，“名字”：“威利”，“姓氏”：“伯顿”，“国家”：“克罗地亚”，“ip地址”：“115.133.81.82”，“电子邮件”：wburton@dynazzy.info"},
{“id”：10，“名字”：“蒂娜”，“姓氏”：“西蒙斯”，“国家”：“美属维尔京群岛”，“ip地址”：“113.49.63.18”，“电子邮件”：tsimmons@devpulse.mil"},
{“id”：11，“名字”：“肯尼斯”，“姓氏”：“拉尔森”，“国家”：“墨西哥”，“ip地址”：“92.89.76.196”，“电子邮件”
<html ng-app="contactsApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Collection-Repeat: Early Preview</title>

  <link href="http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.js"></script>
  <style type="text/css" media="screen">
    .list .my-item.item {
      left: 0;
      right: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
  </style>
</head>

<body ng-controller="MainCtrl">
  <ion-header-bar class="bar-positive">
    <h1 class="title">3000 Contacts</h1>
  </ion-header-bar>
  <ion-content>
    <div class="list">
      <a class="item my-item"
        collection-repeat="item in contacts"
        collection-item-height="getItemHeight(item)"
        collection-item-width="'100%'"
        ng-href="https://www.google.com/#q={{item.first_name + '+' + item.last_name}}"
        ng-style="{'line-height': getItemHeight(item) + 'px'}">
        {{item.letter || (item.first_name+' '+item.last_name)}}
      </a>
    </div>
  </ion-content>
  <script type="text/javascript" charset="utf-8">
    angular.module('contactsApp', ['ionic'])
    .controller('MainCtrl', function($scope, $ionicScrollDelegate, filterFilter) {
      $scope.contacts = window.CONTACTS;
      $scope.getItemHeight = function(item) { return 100; };
    });

    window.CONTACTS = [{"id":1,"first_name":"Patrick","last_name":"Rogers","country":"Cyprus","ip_address":"153.88.89.148","email":"progers@yata.net"},
    {"id":2,"first_name":"Janet","last_name":"Gordon","country":"Croatia","ip_address":"209.73.121.212","email":"jgordon@skivee.biz"},
    {"id":3,"first_name":"Kathy","last_name":"Hamilton","country":"Armenia","ip_address":"164.214.217.162","email":"khamilton@rhynyx.biz"},
    {"id":4,"first_name":"Stephanie","last_name":"Johnson","country":"Mauritius","ip_address":"8.199.242.67","email":"sjohnson@jabbertype.mil"},
    {"id":5,"first_name":"Jerry","last_name":"Palmer","country":"Thailand","ip_address":"230.207.100.163","email":"jpalmer@avamm.org"},
    {"id":6,"first_name":"Lillian","last_name":"Franklin","country":"Germany","ip_address":"150.190.116.1","email":"lfranklin@eare.mil"},
    {"id":7,"first_name":"Melissa","last_name":"Gordon","country":"Serbia","ip_address":"162.156.29.99","email":"mgordon@flashset.org"},
    {"id":8,"first_name":"Sarah","last_name":"Burns","country":"Grenada","ip_address":"13.177.156.223","email":"sburns@eimbee.info"},
    {"id":9,"first_name":"Willie","last_name":"Burton","country":"Croatia","ip_address":"115.133.81.82","email":"wburton@dynazzy.info"},
    {"id":10,"first_name":"Tina","last_name":"Simmons","country":"United States Virgin Islands","ip_address":"113.49.63.18","email":"tsimmons@devpulse.mil"},
    {"id":11,"first_name":"Kenneth","last_name":"Larson","country":"Mexico","ip_address":"92.89.76.196","email":"klarson@browseblab.info"},
    {"id":12,"first_name":"Philip","last_name":"Welch","country":"Cuba","ip_address":"223.180.48.70","email":"pwelch@skippad.edu"},
    {"id":13,"first_name":"Nicholas","last_name":"Parker","country":"British Indian Ocean Territory","ip_address":"200.150.119.13","email":"nparker@twitternation.net"},
    {"id":14,"first_name":"Nicole","last_name":"Webb","country":"Moldova","ip_address":"47.66.237.205","email":"nwebb@midel.biz"},
    {"id":15,"first_name":"Clarence","last_name":"Schmidt","country":"China","ip_address":"134.84.246.67","email":"cschmidt@dazzlesphere.net"},
    {"id":16,"first_name":"Jessica","last_name":"Murray","country":"Sao Tome and Principe","ip_address":"211.30.32.109","email":"jmurray@jumpxs.net"},
    {"id":17,"first_name":"Willie","last_name":"Schmidt","country":"US Minor Outlying Islands","ip_address":"158.40.109.208","email":"wschmidt@babbleset.edu"},
    {"id":18,"first_name":"Margaret","last_name":"Evans","country":"Bhutan","ip_address":"252.123.77.101","email":"mevans@voolia.info"},
    {"id":19,"first_name":"Arthur","last_name":"Morales","country":"Faroe Islands","ip_address":"116.5.126.29","email":"amorales@brainlounge.biz"},
    {"id":20,"first_name":"Charles","last_name":"Perez","country":"Italy","ip_address":"10.43.255.4","email":"cperez@avaveo.net"}];
  </script>
</body>
</html>

<html ng-app="contactsApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Collection-Repeat: Early Preview</title>

  <link href="http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.js"></script>
    <style type="text/css" media="screen">
      .list .my-item.item {
      left: 0;
      right: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
    </style>
</head>

<body>
  <ion-nav-view>
    <ion-side-menus>
      <!-- Center content -->
      <ion-side-menu-content ng-controller="MainCtrl">
      </ion-side-menu-content>

      <ion-header-bar class="bar-positive">
        <h1 class="title">3000 Contacts</h1>
      </ion-header-bar>
      <ion-content>
        <div class="list">
          <a class="item my-item"
            collection-repeat="item in contacts"
            collection-item-height="getItemHeight(item)"
            collection-item-width="'100%'"
            ng-href="https://www.google.com/#q={{item.first_name + '+' + item.last_name}}"
            ng-style="{'line-height': getItemHeight(item) + 'px'}">
            {{item.letter || (item.first_name+' '+item.last_name)}}
          </a>
        </div>
      </ion-content>

      <!-- Left menu -->
      <ion-side-menu side="left">
        This is the side menu.
      </ion-side-menu>
    </ion-side-menus>
  </ion-nav-view>

  <script type="text/javascript" charset="utf-8">
    angular.module('contactsApp', ['ionic'])
    .controller('MainCtrl', function($scope, $ionicScrollDelegate, filterFilter) {
      $scope.contacts = window.CONTACTS;
      $scope.getItemHeight = function(item) { return 100; };
    });

    window.CONTACTS = [{"id":1,"first_name":"Patrick","last_name":"Rogers","country":"Cyprus","ip_address":"153.88.89.148","email":"progers@yata.net"},
    {"id":2,"first_name":"Janet","last_name":"Gordon","country":"Croatia","ip_address":"209.73.121.212","email":"jgordon@skivee.biz"},
    {"id":3,"first_name":"Kathy","last_name":"Hamilton","country":"Armenia","ip_address":"164.214.217.162","email":"khamilton@rhynyx.biz"},
    {"id":4,"first_name":"Stephanie","last_name":"Johnson","country":"Mauritius","ip_address":"8.199.242.67","email":"sjohnson@jabbertype.mil"},
    {"id":5,"first_name":"Jerry","last_name":"Palmer","country":"Thailand","ip_address":"230.207.100.163","email":"jpalmer@avamm.org"},
    {"id":6,"first_name":"Lillian","last_name":"Franklin","country":"Germany","ip_address":"150.190.116.1","email":"lfranklin@eare.mil"},
    {"id":7,"first_name":"Melissa","last_name":"Gordon","country":"Serbia","ip_address":"162.156.29.99","email":"mgordon@flashset.org"},
    {"id":8,"first_name":"Sarah","last_name":"Burns","country":"Grenada","ip_address":"13.177.156.223","email":"sburns@eimbee.info"},
    {"id":9,"first_name":"Willie","last_name":"Burton","country":"Croatia","ip_address":"115.133.81.82","email":"wburton@dynazzy.info"},
    {"id":10,"first_name":"Tina","last_name":"Simmons","country":"United States Virgin Islands","ip_address":"113.49.63.18","email":"tsimmons@devpulse.mil"},
    {"id":11,"first_name":"Kenneth","last_name":"Larson","country":"Mexico","ip_address":"92.89.76.196","email":"klarson@browseblab.info"},
    {"id":12,"first_name":"Philip","last_name":"Welch","country":"Cuba","ip_address":"223.180.48.70","email":"pwelch@skippad.edu"},
    {"id":13,"first_name":"Nicholas","last_name":"Parker","country":"British Indian Ocean Territory","ip_address":"200.150.119.13","email":"nparker@twitternation.net"},
    {"id":14,"first_name":"Nicole","last_name":"Webb","country":"Moldova","ip_address":"47.66.237.205","email":"nwebb@midel.biz"},
    {"id":15,"first_name":"Clarence","last_name":"Schmidt","country":"China","ip_address":"134.84.246.67","email":"cschmidt@dazzlesphere.net"},
    {"id":16,"first_name":"Jessica","last_name":"Murray","country":"Sao Tome and Principe","ip_address":"211.30.32.109","email":"jmurray@jumpxs.net"},
    {"id":17,"first_name":"Willie","last_name":"Schmidt","country":"US Minor Outlying Islands","ip_address":"158.40.109.208","email":"wschmidt@babbleset.edu"},
    {"id":18,"first_name":"Margaret","last_name":"Evans","country":"Bhutan","ip_address":"252.123.77.101","email":"mevans@voolia.info"},
    {"id":19,"first_name":"Arthur","last_name":"Morales","country":"Faroe Islands","ip_address":"116.5.126.29","email":"amorales@brainlounge.biz"},
    {"id":20,"first_name":"Charles","last_name":"Perez","country":"Italy","ip_address":"10.43.255.4","email":"cperez@avaveo.net"}];
  </script>
</body>
</html>