Question

我正在研究Ionic中的选择列表，但我不想要默认选择框设计所以在一些谷歌搜索后我找到了1个代码在哪里显示模型选择。我把它放在默认选择它（带搜索）按钮在我的codepen 。我希望它在我的选择框上关联。我把所有要求放在这里

我的代码笔是`

codepen.io/anujsphinx/pen/Lbryzz

`

Answer 1

尝试它可能有用。

＆＃13;

angular.module('starter', ['ionic', 'ionic-modal-select'])

.controller('MainCtrl', ['$scope','$ionicModal', function ($scope,$ionicModal) {
  
  $scope.someModel = 'select any';
  
  $scope.selectables = [
    1, 2, 3
  ];
     $scope.countries = [
    {id: 1, text: 'USA', checked: false, icon: null}, 
    {id: 2, text: 'France', checked: false, icon: 'https://www.zeendoc.com/wp-content/themes/zeendoc/img/french_flag_small.jpg'}, 
    {id : 3, text: 'Japan', checked: true, icon: null}];
   $ionicModal.fromTemplateUrl('templates/opp_lead_name.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });
}])

＆＃13;

 .option-selected{
        background-color: #ccc !important;
      }

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

＆＃13;

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title></title>

    <link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">   
    <!-- ionic/angularjs js -->
    <script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
    <script src="https://rawgit.com/inmagik/ionic-modal-select/master/dist/ionic-modal-select.js"></script>


  </head>
<body ng-app="starter" ng-controller="MainCtrl">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic modal select example</h1>
      </ion-header-bar>
      <ion-content>
        <div class="item item-body">user name : 
          <button class="button button-positive" modal-select="" ng-model="someModel" options="selectables" modal-title="Select a number" has-search="true">  
           {{someModel}} <span class="caret"></span>
            <div class="option">
              {{option}}
            </div>
          </button>              
        </div>
          <script id="templates/opp_lead_name.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">Select Lead </h1>
        </ion-header-bar>
           <div class="bar bar-subheader item item-input-inset">
  <label class="item-input-wrapper">
      <input type="text" placeholder="Search" ng-model="search">
      </label>      
</div>
        <ion-content class="padding has-subheader">
        <ion-list>
          <ion-item ng-repeat="item in countries | filter: search">
        <div ng-click="">{{item.text}}</div>
          </ion-item>
        </ion-list>
        </ion-content>
      </ion-modal-view>
    </script>
      </ion-content>
    </ion-pane>
  </body>
</html>

＆＃13;

离子选择框与默认选择下拉列表相同

1 个答案: