在ngRepeat，使可編輯的表格，如何將數據保存到ngModel

Question

我有角表

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

}

我想在編輯span時更新option.name，但是當我編輯span時，輸入文本字段中的值沒有改變，menu.currentMenu中的選項也沒有改變。我無法觸發綁定到輸入標籤的ng-blur函數。

我做了什麼： 我使用ng-bind =「option.name」來跨度，但是當我編輯span標記時輸入中的ng-model沒有改變。

我怎麼能修改代碼，使其工作，編輯表格，改變ngModel

謝謝！

Answer 1

您可以通過參考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 
}