无法单击列表内的按钮（ng-repeat）答案

【问题标题】：Cannot click button inside a list (ng-repeat)无法单击列表内的按钮（ng-repeat）
【发布时间】：2017-03-08 02:35:04
【问题描述】：

我在使用列表中的按钮时遇到问题。该列表正在使用ng-repeat 构建。我正在尝试创建一个简单的网络应用程序来创建任务。给定以下代码，我无法单击应该显示任务描述的按钮（带有齿轮的按钮）。提前谢谢你。

HTML：

 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Tasks List</title>

    <link rel="manifest" href="manifest.json">

    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>





  <body ng-app="todo" ng-controller='mainCtrl'>
    <ion-pane>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Tasks</h1>
      </ion-header-bar>
      <ion-content>
        <div class="list list-inset">
          <label class="item item-input">
            <input type="text" name="list" placeholder="Task Name" ng-model="task">
          </label>
          <label class="item item-input">
            <input type="text" placeholder="Description" ng-model="description">
          </label>
        </div>

        <button class ="button button-dark right" ng-click="add(task,description)">Add</button>

          <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col col-50">

              <ion-list show-delete="1==1" ng-repeat="task in tasks">
                <ion-item>
                  {{task.taskname}}
                    <ion-delete-button class="ion-minus-circled" ng-click="delete(task)"></ion-delete-button>
                    <button ng-click="task.selected=!task.selected" class="btn button icon ion-gear-a"></button>
                </ion-item>

               <div class="item item-divider" ng-show="task.selected">
                {{task.description}}
               </div>
              </ion-list>
            </div>
          </div>



      </ion-content>
    </ion-pane>
  </body>
</html>

app.js：

angular.module('todo', ['ionic'])

.controller('mainCtrl',function($scope, $ionicModal){
  $scope.tasks=[
{
  taskname: 'Hi',
  description:'I am a description',
  selected: false
},
{
  taskname:'Hello',
  description:'I am another description',
  selected: false
},
{
  taskname: '123',
  description:'I am another description',
  selected: false
},
{
  taskname: '456',
  description:'I am another description',
  selected: false
},
{
  taskname: '789',
  description:'I am another description',
  selected: false
},
  ]

  $scope.select=-1;

    $scope.add=function(task,description){
      if ($scope.tasks.indexOf(task)!== -1){
        this.list="Already exists!"
      }
else{
  newtask={
    taskname: task,
    description: description,
    selected: false
  };

  $scope.tasks.push(newtask);

    }
  };

$scope.delete=function(task){
  var index = $scope.tasks.indexOf(task);
  $scope.tasks.splice(index, 1);

}


});

【问题讨论】：

你试过用ion-button
是的，也不行。它就像按钮上的东西，我不能点击它，如果我把按钮放在 ng-repeat 之外，我可以点击它。
我会尝试在 ion-item 上做 no-repeat，而不是像文档那样在 list 指令本身上。
还是不能点击。我不知道可能是什么问题
尝试将这些按钮类的 z-index 设置为 1000。这不是正确的方法，但它会告诉我们这是否是因为 ionic 的某些样式。

标签： angularjs ionic-framework

【解决方案1】：

你的控制器线应该是：

.controller('mainCtrl', ['$scope', '$ionicModal', function($scope, $ionicModal) {

很明显，最后还有额外的 ]。

【讨论】：

感谢您的帮助，但我仍然无法单击齿轮按钮。还有其他想法吗？
您是否尝试过仅使用
不，不起作用。似乎列表在按钮上方，这就是我无法单击它的原因。我不知道如何解决这个问题

【解决方案2】：

我删除了 ios-list 和 ion-item 标签并用 ul 和 li 替换它们，效果很好，这些标签有问题吗？

【讨论】：