Question

我有一个离子1应用程序正在进行更新。

其中一个新要求是我在输入字段的右侧添加了一个“x”。

我已经尝试了很多东西，这是我认为我已经接近正确的实现，但仍然无法正常工作。

有什么想法吗？

<form action="">
  <input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
  <i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>

Answer 1

您可以使用list和item类以及item-icon-right类来实现您的目标。这是一个工作样本：

angular.module('ionicApp', ['ionic'])

  .controller('MainCtrl', function($scope) {


  });

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Input X Icon</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">

  <ion-header-bar class="bar-positive">
    <h1 class="title">Input X Icon On Right</h1>
  </ion-header-bar>

  <ion-content>
    <form>
      <div class="card list">
        <div class="item item-icon-right">
          <input type="text" placeholder="Placeholder Goes Here">
          <i class="icon ion-close"></i>
        </div>
      </div>
    </form>
  </ion-content>

</body>

</html>

Ionic v1将图标放在输入字段中或旁边

1 个答案: