在ngRepeat上,制作可编辑的表,如何将数据保存到ngModel

时间:2016-11-07 16:00:41

标签: javascript angularjs

我有角度表

<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(菜单属性中的数组):

{
"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" }
]

}

我想在编辑范围时能够更新option.name,但是当我编辑范围时,输入文本字段中的值没有改变,而menu.currentMenu中的选项没有&#39 ;也改变。而且我无法触发绑定到输入标签的ng-blur功能。

我做了什么: 我使用ng-bind =&#34; option.name&#34;延伸,但是当我编辑span标签时,输入中的ng模型没有改变。

如何修改代码使其工作,编辑表格,更改ngModel

谢谢!

1 个答案:

答案 0 :(得分:1)

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

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

双击显示输入。

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

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

brew uninstall ruby
brew link libyaml
brew install ruby