離子選擇框與默認選擇下拉菜單相同

我在Ionic的選擇列表上工作，但我不想要默認選擇框設計，所以一些Google搜索後我發現1 codepen其中模型選擇顯示。我把它默認選擇它（帶搜索）按鈕在我的codepen中。我希望它在我的選擇框上關聯。我已經把我的一切都在這裏要求離子選擇框與默認選擇下拉菜單相同

我的代碼筆是'

codepen.io/anujsphinx/pen/Lbryzz

來源

2016-12-08 Anuj

嘗試可能工作。

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; 
 
    }); 
 
}])

.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; 
 
}

<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>

來源

2016-12-09 05:48:00

哦，你設計的按鈕，選擇框。好主意，它正在工作。你能做多選嗎？ – Anuj

離子選擇框與默認選擇下拉菜單相同

回答

相關問題