Question

我正在阅读Ionic Framework的教程，该教程使用Angular JS创建一个简单的Todo应用程序。它通过使用.push()将新任务对象附加到任务对象数组（代码如下）来创建新任务。

当我尝试添加多个任务时，我收到此错误。

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: task in tasks, Duplicate key: object:00C
http://errors.angularjs.org/1.2.4/ngRepeat/dupes?p0=task%20in%20tasks&p1=object%3A00C

我已尝试使用解决方案as posted in this answer和this blog post，建议添加track by $index，但它对我来说无法正常工作......

它确实摆脱了错误，但是当我添加一个新任务时，它会使用该新任务更新数组中的所有对象！在我ng-repeat块中的任务列表中，我可以看到每个任务现在与我刚刚添加的任务相同。

我在这里做错了什么？是否与我推入阵列的物体有关？我是Angular.js的新手，所以也许我错过了一些简单而又至关重要的东西？

这是我的HTML：

<body ng-app="todo" ng-controller="TodoCtrl">
  <side-menus>

    <!-- Center content -->
    <pane side-menu-content>
    <header class="bar bar-header bar-dark">
      <h1 class="title">Todo</h1>
      <!-- New Task button-->
      <button class="button button-icon" ng-click="editTasks()">
        <i class="icon ion-edit"></i>
      </button>
      <button class="button button-icon" ng-click="newTask()">
        <i class="icon ion-compose"></i>
      </button>
    </header>
      <content has-header="true">
        <!-- our list and list items -->
        <list>
          <item ng-repeat="task in tasks track by $index">
            {{task.title}}
          </item>
        </list>
      </content>
    </pane>

    <!-- Left menu -->
    <side-menu side="left">
      <header class="bar bar-header bar-dark">
        <h1 class="title">Projects</h1>
      </header>
    </side-menu>

    <!-- Add a new task -->
        <script id="new-task.html" type="text/ng-template">         
          <div class="modal">   
            <!-- Modal header bar -->
            <header class="bar bar-header bar-secondary">
              <h1 class="title">New Task</h1>
              <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
            </header>
            <!-- Modal content area -->
            <content has-header="true">     
              <form ng-submit="createTask(task)">
                <div class="list">
                  <label class="item item-input">
                    <input type="text" placeholder="What do you need to do?" ng-model="task.title">
                  </label>
                </div>
                <div class="padding">
                  <button type="submit" class="button button-block button-positive">Create Task</button>
                </div>
              </form>
            </content>
          </div>        
        </script>       

  </side-menus>
</body>

这是我的JS：

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

.controller('TodoCtrl', function($scope, Modal) {
  // No need for testing data anymore
  $scope.tasks = [];

  // Create and load the Modal
  Modal.fromTemplateUrl('new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });

  // Called when the form is submitted
  $scope.createTask = function(task) {
    console.log('task', task);
    $scope.tasks.push(task);
    console.log('$scope.tasks', $scope.tasks);
    $scope.taskModal.hide();
  };

  // Open our new task modal
  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  // Close the new task modal
  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  };
});

Answer 1

问题似乎是您没有创建独立的任务实例。看起来您的模态绑定到单个任务实例并尝试每次添加相同的精确引用。尝试以下内容。

在你的JS中：

// Open our new task modal
$scope.newTask = function() {
   $scope.editTask = {};
   $scope.taskModal.show();
};

在您的HTML中：

   <form ng-submit="createTask(editTask)">
      <div class="list">
         <label class="item item-input">
            <input type="text" placeholder="What do you need to do?" ng-model="editTask.title">
         </label>
      </div>
      <div class="padding">
         <button type="submit" class="button button-block button-positive">Create Task</button>
      </div>
   </form>

每次调用newTask函数时都会创建一个新的editTask实例，并将该新实例添加到数组中。在这些更改之后，您不应该通过$ index代码来跟踪轨道。

Angular.js错误：不允许在转发器中重复 - 按索引跟踪不能按预期工作

1 个答案: