CODEWITHSUNDEEP
javascriptangularjs
Xinrui Ma
Xinrui Ma

Reputation: 2105

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

I have angular table 

<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>

This is my currentMenu (the array in menu attribute):

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

}

I want to be able update the option.name when I done editing the span, but when I edit the span, the value in input text field didn't change, and the option in menu.currentMenu didn't change also. And I can't trigger the ng-blur function that bind to the input tag.

What I did: I use the ng-bind="option.name" to span, but the ng-model in input didn't change when I edit the span tag.

How could I modify the code to make it work, edit the table, change the ngModel

Thanks!

Upvotes: 0

Views: 207

Answers (1)

Deividas
Deividas

Reputation: 6507

You can pass the reference to the option.name variable

<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>

Show the input on double click.

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

and updated the variable in the function accordingly

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

Upvotes: 1

Related Questions