点击按钮，甚至激活了下拉点击时/选择

我有这样一个列表项）

<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

点击按钮，甚至激活了下拉点击时/选择

回答

相关问题