Fatal编程技术网
  • javascript/
  • Javascript Angular.js错误：中继器中不允许重复-按索引跟踪不'；我不能如愿工作

Javascript Angular.js错误：中继器中不允许重复-按索引跟踪不'；我不能如愿工作

javascript angularjs

Javascript Angular.js错误：中继器中不允许重复-按索引跟踪不'；我不能如愿工作,javascript,angularjs,Javascript,Angularjs,我正在学习一个关于的教程，它使用Angular JS创建一个简单的Todo应用程序。它通过使用.push（）将新任务对象附加到任务对象数组中来创建新任务（代码如下） 当我尝试添加多个任务时，出现此错误 我尝试过使用解决方案和，它建议添加track by$index，但它对我来说不起作用 它确实消除了错误，但是当我添加一个新任务时，它会用这个新任务更新数组中的所有对象！在我的ng repeat块中的任务列表中，我可以看到每个任务现在都与我刚才添加的任务相同 我做错了什么？这与我推到阵列上的对象有关

我正在学习一个关于的教程，它使用Angular JS创建一个简单的Todo应用程序。它通过使用
.push（）
将新任务对象附加到任务对象数组中来创建新任务（代码如下）

当我尝试添加多个任务时，出现此错误

我尝试过使用解决方案和，它建议添加
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>

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();
  };
});
问题似乎是您没有创建独立的任务实例。您的模式似乎绑定到单个任务实例，并且每次都尝试添加相同的精确引用。试试下面的方法

在您的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代码跟踪。

如果您可以在JSFIDLE或plunkr上设置它，那就太好了。MVC的另一个版本不依赖于ionic框架，可以在这里找到，尽管我不太确定，但您可以尝试将
task.title
更改为
tasks[$index]。title
和/或
createTask（task）
更改为
createTask（tasks[$index]）
   <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>