Question

离子性：

我有一个这样的列表项：

    <label class="item  item-select item-button-left">
      <button class="button button-positive" ng-click="something()" >
        <i class="icon ion-android-add-circle" ></i>
      </button>

        <label>My Label</label>
      <select>
        <option ng-repeat="x in xs" value="{{ x.id }}">{{ x.name }}</option>
      </select>


    </label>

每当我点击按钮时，都会调用something（），但是当我点击任何内容（标签或下拉列表）时会调用某些内容。而下拉不起作用。

此外，html结构可能不正确。如果下拉列表中没有必需的项目，我的要求是“添加”新项目。我知道我们可以添加“添加新的”作为选择的第一个元素，当我们点击它时，它会让我添加（使用ng-change功能）。但我觉得拥有+图标要好得多。你怎么说？

Answer 1

这个例子怎么样？

（请注意，按钮必须在<label class="item-input item-select">元素之外）

＆＃13;

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  
  $scope.addItem = function() {
      var i = $scope.xs.length;
      $scope.xs.push({ id: i, name: "item"+i });
  };
  
  $scope.xs = [];
  for (var i=0; i<5; i++) {
    $scope.xs.push({ id: i, name: "item"+i });
  }
  
});

＆＃13;

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Ionic List Directive</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="MyCtrl">
  <ion-header-bar class="bar-positive">
    <h1 class="title">Ionic Delete/Option Buttons</h1>
  </ion-header-bar>

  <ion-content>
    <div class="list">
      <!-- first example -->
      <div class="item item-button-left">
        <button class="button button-positive" ng-click="addItem()">
          <i class="icon ion-android-add-circle"></i>
        </button>
        <label class="item-input item-select">
          <div class="input-label">
            My Label
          </div>
          <select>
            <option ng-repeat="x in xs" value="{{ x.id }}">{{ x.name }}</option>
          </select>
        </label>
      </div>
      <!-- second example -->
      <div class="item item-input-inset">
        <button class="button button-positive" ng-click="addItem()">
          <i class="icon ion-android-add-circle"></i>
        </button>
        <label class="item-input-wrapper item-select">
          <div class="input-label">
            My Label
          </div>
          <select>
            <option ng-repeat="x in xs" value="{{ x.id }}">{{ x.name }}</option>
          </select>
        </label>

      </div>
      
      <hr/>
      <pre>xs.length = {{xs.length|json}}</pre>
    </div>
  </ion-content>

</body>

</html>

＆＃13;

即使单击下拉列表/选择，也会单击激活按钮

1 个答案: