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

}

スパンの編集を終えたときにoption.nameを更新できるようにしたいのですが、スパンを編集するときに入力テキストフィールドの値が変更されず、menu.currentMenuのオプションも変更されませんでした。また、入力タグにバインドするng-blur関数をトリガすることはできません。

私がしたこと： スパンタグを編集すると、ng-bind = "option.name"が入力されましたが、入力のng-modelは変更されませんでした。

どのように私は、それを動作させるためにコードを修正テーブルを編集し、ngModelに

感謝を変更することができます！

Answer 1

あなたは

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

変数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 
}