點擊按鈕，甚至激活了下拉點擊時/選擇

我有這樣一個列表項）

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

每當我按一下按鈕，東西（被稱爲但是東西當我點擊任何東西（標籤或下拉列表）時被調用。和下拉不起作用。

此外，html結構可能不正確。我的要求是如果在下拉菜單中沒有需要的項目，請「添加」一個新項目。我知道我們可以添加「添加新的」作爲select的第一個元素，當我們點擊它時，它會讓我添加（使用ng-change函數）。但我覺得擁有+圖標要好得多。你說什麼？

來源

2016-01-21 user1305989

這個例子怎麼樣？

（請注意，按鈕必須是<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>

來源

2016-01-21 13:06:19 beaver

感謝您的回答+1。 – user1305989

點擊按鈕，甚至激活了下拉點擊時/選擇

回答

相關問題