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

【问题标题】：Click on button activated even when clicked on dropdown/select即使单击下拉/选择，单击按钮也会激活
【发布时间】：2016-01-21 21:36:21
【问题描述】：

离子：

我有一个这样的列表项：

    <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 功能）。但我觉得有一个+图标要好得多。你说什么？

【问题讨论】：

标签： ionic-framework

【解决方案1】：

这个例子怎么样？

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

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

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

【讨论】：

感谢+1的回答。