Question

大家好，我是离子的新手。当你在朋友的时间线上分享帖子时，我正试图实现一个包含用户列表的drop，就像Facebook一样。但问题是我无法理解如何实现这样的下拉。请帮帮我。到现在为止我已经完成了这个

＆＃13;

var app = angular.module("myApp",[]);

app.controller("myCtrl",function($scope){
    $scope.users = [
       {id:1, name:"John"},
       {id:2, name:"Sue"},
       {id:3, name:"Marc"}
     ]
  });

＆＃13;

.styled-select {
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
   height: 35px;
   overflow: hidden;
   width: 240px;
   color:white;
}
.blue    { background-color: #387EF5; }

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.3.1/css/ionic.css">
<script src="http://code.ionicframework.com/1.3.1/js/ionic.js">
</script>
  <body ng-app="myApp">
     <div class="row" ng-controller="myCtrl">
       <select  class="styled-select blue semi-square center" ng-model="userAction" ng-change="getUserActionDisabled(userAction)" style="width: 100%!important">
         <option ng-repeat="user in users" value="{{user.id}}" >{{user.name}}</option>
       </select>
     </div>
  </body>

＆＃13;

Answer 1

查看this Ionic 1 doc关于＆＃39;选择输入＆＃39;。选择输入是下拉列表。为了您的目的，您可以执行类似

的操作

<div class="list row" ng-controller="myCtrl">
  <label class="item item-input item-select">
    <div class="input-label">
    Users
    </div>
    <select class="styled-select blue semi-square center" 
            ng-model="userAction" 
            ng-change="getUserActionDisabled(userAction)" 
            style="width: 100%!important">
      <option ng-repeat="user in users" value="{{user.id}}">{{user.name}}</option>
    </select>
  </label>
</div>

P.S。我看到你正在使用Angular 1.x，但你在标签中有Ionic 2。（Ionic 2仅与Angular 2兼容）：）

在离子下降

1 个答案: