javascript - 列表项的动态编辑

Question

我使用 ng-repeat 指令显示元素列表。每个元素都显示在一个专用的 div 块中。我想允许块编辑意味着当点击一个编辑按钮时，一个元素 div 的内容变成一个可以提交的表单......

我想遵循 Angularjs 哲学，这意味着控制器中没有 dom 操作，而是使用指令...... ;-)

Answer 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 的一个我很喜欢的功能 - 模型会自动更新，无需显式更新或保存） - 我提供它仅用于说明目的。