CODEWITHSUNDEEP
ionic-framework
user1305989
user1305989

Reputation: 3361

Click on button activated even when clicked on dropdown/select

Ionic:

I have a list item like this:

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

Whenever I click button, something() is being called but something is called when I click on anything (label or dropdown). And dropdown not working.

Also, the html structure might not be correct. My requirement is to "add" a new item if there is no required item in dropdown. I know we can add "Add new one" as first element of select and when we click it, it will let me add (using ng-change function). But I feel that having a + icon is much better. What do you say ?

Upvotes: 1

Views: 1235

Answers (1)

beaver
beaver

Reputation: 17647

How about this examples?

(Note that button must be outside the <label class="item-input item-select"> element)

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>

Upvotes: 1

Related Questions