Question

我有以下代码（来自本教程：http://yeoman.io/codelab/write-app.html）：

HTML：

  < form ng-submit="addTodo()" >

    <div class="input-group">
      <input type="text" ng-model="todo" placeholder="Description" class="form-control">
      <span class="input-group-btn">
          <input type="submit" class="btn btn-primary" value="Add">
      </span>
    </div>

  <div ui-sortable ng-model="todos">
    <p class="input-group" ng-repeat="todo in todos" >
        <input type="text" ng-model="todo" class="form-control" >
        <span class="input-group-btn">
            <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove" >X</button>
        </span>
    </p>
</div>
<input type="text" ng-model="anotherField" class="form-control" >

< /form>

js控制器：

$scope.todos = ['1','2'];

$scope.addTodo = function(){
  $scope.todos.push($scope.todo);
  $scope.todo = '';
};

$scope.removeTodo = function(index){
  $scope.todos.splice(index,1);
};

现在的情景：我在列表中添加了一些待办事项 2.我修改现有待办事项的值 3.我修改了anotherField的值 4.我添加另一个待办事项（或删除现有的一个）

在步骤4（调用addTodo或removeTodo函数）之后，步骤2的修改将丢失。但是，仍然可以看到步骤3中的修改。

为什么它会这样？添加/删除项目后，我该怎么做才能保留更改？

Answer 1

修改待办事项时，您需要为ng-repeat的$ scope.todo变量分配一个新字符串。但是这并没有改变你的待办事项数组所引用的字符串。

停止使用字符串作为模型，并使用具有属性的对象，并且一切都会正常工作，因为todos数组和ng-repeat都会引用同一个对象，并且只会修改此属性同一个对象：

和

将项目添加到列表后，用户更改丢失

1 个答案: