在 ng-repeat angularjs 中更新

Question

我想在 ng-repeat 指令中更新用户名。如果我采用变量但无法在数组中这样做，我可以进行编辑。这里 title 是一个变量， users 是一个数组。我想更新用户名

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
  <div ng-app>
  <div ng-controller="ClickToEditCtrl">
    <div ng-hide="editorEnabled">
      {{title}}  {{name}}

      <br>users
     <ul> <li ng-repeat="(key,u) in users">
    {{key+1}} name: {{u.name}}  <a href="#" ng-click="enableEditor(u.name)">Edit title</a>
         </li></ul>

    </div>
    <div ng-show="editorEnabled">
      <input ng-model="editableTitle" ng-show="editorEnabled"><br><br>
     <input ng-model="editableUserName" ng-show="editorEnabled">

      <a href="#" ng-click="save()">Save</a>
      or
      <a href="#" ng-click="disableEditor()">cancel</a>.
    </div>
  </div>
</div>


<script>
function ClickToEditCtrl($scope) {
  $scope.title = "Welcome to this demo!";

     $scope.users = [{'name':'A'},{'name':'B'}];

  $scope.editorEnabled = false;

  $scope.enableEditor = function(name) {
      $scope.editorEnabled = true;
    alert(name);
    $scope.editableTitle = $scope.title;

     $scope.editableUserName = name

  };

  $scope.disableEditor = function() {
    $scope.editorEnabled = false;
  };

  $scope.save = function() {
    $scope.title = $scope.editableTitle;
   $scope.users.name = $scope.editableUserName;
    $scope.disableEditor();
  };
}
</script>`


`

Answer 1

对于您正在编辑的用户的编辑通行证：

<a href="#" ng-click="enableEditor(u)">Edit title</a>

然后存储对该用户的引用。

var editableUser;

$scope.enableEditor = function(user) {
    $scope.editorEnabled = true;
    $scope.editableTitle = $scope.title;

    $scope.editableUserName = user.name;
    editableUser = user;
};

然后在save中，保存对用户的修改：

$scope.save = function() {
    $scope.title = $scope.editableTitle;
    editableUser.name = $scope.editableUserName;
    $scope.disableEditor();
};

http://plnkr.co/edit/2VZk2Ej6DR4g51MjiC3j?p=preview

Answer 2

理想情况下，您希望拥有一个不会更改且关联到每个用户的 ID。

这个笨蛋就是你的答案plunker

我已经使用数组的 $index 作为 id，但理想情况下你应该给每个用户一个 id

ng-click="enableEditor($index)"

我也修改了你的一些函数来记录索引

在 ng-repeat angularjs 中更新

to update in ng-rpeat angularjs

angularjs

angularjs-ng-repeat