在ngRepeat上，创建可编辑的表格，如何将数据保存到ngModel

On ngRepeat, make editable table, how to save data to ngModel

本文关键字：数据 保存 ngModel ngRepeat 创建 编辑 表格      更新时间：2023-09-26

我有一个角表

<tr ng-repeat="option in menu.currentMenu">
  <td>
    <span ng-hide="false" ng-dblclick="menu.editItem($event)">{{option.name}}</span>
    <input ng-show="false" ng-model="option.name" ng-blur="menu.doneEditing($event)"/>
  </td>
</tr>

这是我的currentMenu (array in menu属性):

{
"menu": [
    {
        "id": "PUB17f156ca0edc4ad7a56afbe3c5500d",
        "name": "Profile",
        "pageType": "userProfile",
        "separator": {
            "rowType": "breakLine"
        }
    },
    {
        "id": "PUBbc9c1a170c41b00000000154d0336c05",
        "name": "Home (P3)",
        "pageType": "homeRail"
    },
    {
        "id": "PUBf4c8a4fa0be6b00000000156b3d0f596",
        "name": "Home (halloween)",
        "pageType": "railList"
    },
    {
        "id": "PUB37f156ca0edc4ad7a56afbe3c5500de0",
        "name": "Favorites",
        "pageType": "favorites",
        "separator": {
            "rowType": "breakLine"
        }
    },
    {
        "id": "PUBe3319f820c49b000000001553c201c60",
        "name": "Comedy",
        "pageType": "collection"
    },
    {
        "id": "PUB2f9efc830be6b000000001569ac87da0",
        "name": "Halloween",
        "pageType": "collection"
    },
    {
        "id": "PUB8c6b06fa09c6b1be97ed014efaf2c6f0",
        "name": "Discovery",
        "pageType": "collection"
    },
    {
        "id": "PUB4094f1fa0be6b00000000156b4c2d0dd",
        "name": "360 videos",
        "pageType": "collection"
    },
    {
        "id": "PUBeb1619ff0b2ab000000001540b71b8fb",
        "name": "Sports",
        "pageType": "railList"
    },
    {
        "id": "PUBfdb8f3220be7b00000000156b34a823f",
        "name": "Networks",
        "pageType": "railList",
        "separator": {
            "rowType": "breakLine"
        }
    },
    { "id": "PUBd7f156ca0edc4ad7a56afbe3c5500de0", "name": "Settings", "pageType": "settings" },
    { "id": "PUBd7f156ca0edc4ad7a56afbe3c5500de0", "name": "Logout", "pageType": "logout" }
]

}

我希望能够在编辑span时更新option.name，但是当我编辑span时，输入文本字段中的值没有改变，菜单中的选项也没有改变。currentMenu也没有改变。我不能触发绑定到输入标签的ng-blur函数。

我所做的:我使用ng-bind="option.name"来span，但是当我编辑span标签时，input中的ng-model没有改变。

我如何修改代码使其工作，编辑表，更改ngModel

谢谢!

您可以将引用传递给option.name变量

<tr ng-repeat="(key, option) in menu.currentMenu">
  <td>
    <span ng-hide="option.showEdit" ng-dblclick="menu.editItem($event, option)">{{option.name}}</span>
    <input ng-show="option.showEdit" ng-model="option.name" ng-blur="menu.doneEditing($event, key, option)"/>
  </td>
</tr>

双击显示输入

menu.editItem(item) {
  item.showEdit = true;
}

并相应地更新函数中的变量

menu.doneEditing($event, key, item) {
  menu.currentMenu[key].name = item.name;
  item.showEdit = false; // Hide the item
}
相关文章：