javascript - リスト項目の動的編集

Question

ng-repeat ディレクティブを使用して要素のリストを表示します。各要素は、専用の div ブロック内に表示されます。ブロック編集を許可したいのですが、編集ボタンをクリックすると、要素 div の内容が送信可能なフォームになります...

私は Angularjs の哲学に従いたいと思います。つまり、コントローラーで dom を操作するのではなく、ディレクティブを使用することを意味します... ;-)

Answer 1

これを行う 1 つの方法は、要素を条件付きで表示することです (読み取り専用またはフォームとして)。次のようになります。

<div ng-repeat="item in list">
    <div ng-hide="editMode(item.id)">
        <!-- This will contain the DOM elements that
             will only display the item -->
        <span>item.text</span>
        <button type="button" ng-click="changeToEditMode(item.id)">
            Edit
        </button>
    </div>
    <div ng-show="editMode(item.id)">
        <!-- This will contain DOM elements that will
             allow editing the item -->
        <input type="text" ng-model="item.text">
        <button type="button" ng-click="editItem(item)">
            Save
        </button>
    </div>
</div>

コントローラーでは、次のコードを使用できます。

//The list of elements
//Id is needed to uniquely identify an item in the list
$scope.list = [
    {
        id: 1,
        text: "item_1"
    },
    {
        id: 2,
        text: "item_2"
    }
];

//Contains the ID of the item currently being edited
//You can have single item that can be in edit mode at one time or
//you can have multiple items open in edit mode. Go with an array for the latter
//By default, no item is in edit mode
$scope.itemIdForEdit = 0;

//Checks if the item is in edit mode
$scope.editMode = function (itemId) {
    return $scope.itemForEdit === itemId;
};

//Changes the item being edited
$scope.changeToEditMode = function (itemId) {
    $scope.itemForEdit = itemId;
};

//Edits the item
$scope.editItem = function (item) {
    //Logic to update the item in the $scope.list or backend.
};

このようにして、リスト内の要素を表示および編集できます。モデルを入力タグに割り当てると、アイテムの内容が変更されることに注意してください (私が気に入っている AngularJS の機能の 1 つ - モデルは自動的に更新され、明示的な更新や保存を行う必要はありません)。