Question

我在列表中遇到按钮问题。该列表正在使用ng-repeat构建。我正在尝试创建一个简单的Web应用程序来创建任务。鉴于以下代码，我无法点击应该显示任务说明的按钮（带齿轮的按钮）。提前谢谢。

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

}


});

Answer 1

您的控制器行应该是：

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

显然是额外的]。

Answer 2

我删除了ios-list和ion-item标签并用ul和li替换它们并且它完美地工作，这些标签有问题吗？

无法单击列表中的按钮（ng-repeat）

2 个答案: