个人中心
gpt4 book ai didi

javascript - ionic 选择框与默认选择下拉列表相同

转载 作者：行者123 更新时间：2023-12-03 05:28:49 25 4
gpt4 key购买 nike

我正在 Ionic 中的选择列表上工作，但我不想要默认的选择框设计，所以经过一些谷歌搜索后，我发现 1 codepen 其中模型选择显示。我将其默认选择它(使用搜索)按钮在我的 codepen 中。我希望它关联到我的选择框。我已经把我所有的要求都写在这里了

enter image description here

我的代码笔是`

codepen.io/anujsphinx/pen/Lbryzz

`

最佳答案

尝试一下可能会有效。

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>

关于javascript - ionic 选择框与默认选择下拉列表相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41040570/

25 4 0
文章推荐： javascript - Wavesurfer.js 未在本地或从服务器加载
文章推荐： javascript - 无论如何，嵌套的 $http.post 总是返回一个 promise
文章推荐： javascript - JavaScript 中的内存管理
文章推荐： javascript - 如何使用 jQuery 和 Bootstrap 正确表示对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com