在AngularJS中切换编辑状态并更改项目'单击另一个函数

Toggle an edit state in AngularJS and change items's ng-click to another function

本文关键字：项目 单击 函数 另一个 AngularJS 编辑 状态      更新时间：2023-09-26

我得到了一个编辑按钮和一个包含项目的列表。当我点击编辑时，我想进入"编辑模式"，当在编辑模式下时，我希望能够点击列表中的项目，并在点击时删除它们。当不处于编辑模式时，这些项目会调用另一个函数，所以我不确定如何实现这一点。

这是我的标记：

<span class="side-text"><a ng-click="toggleEditState()">Edit</a></span>
<ul id="fav-tags-list" class="list">
    <li ng-repeat="tag in tagsList" ng-bind="tag" 
        ng-click="shared.getImages(tag)"></li> //If editState = true then change to removeTag(tag)
</ul>

以及处理编辑状态模式的控制器：

flickrApp.controller('tagsCtrl', ['$scope', '$firebase', 'shared', function($scope, $firebase, shared) {
    $scope.editState = false;
    $scope.shared = shared;
    $scope.removeTag = function(tag) {
        shared.updateTags(tag);
        var newTagsList = shared.getTags();
        sync.$set({favoriteTags: newTagsList});
    }
    $scope.toggleEditState = function() {
        if ($scope.editState === false) {
            $scope.editState = true;
        }
        else {
            $scope.editState = false;
        }
    }
}]);

我将如何在这里实现我想要的？如果有更聪明的解决方案，我会接受它。

我认为有一个非常简短而优雅的解决方案：

<div ng-click="select? a() : b()">some element</div>

如果select为真，则调用a()，否则调用b()。

这里有一个plnkr，展示了我在几个div上的解决方案，为您的用例实现它应该不难。

您可以创建一个函数，根据$scope.editState变量调用shared.removeTag(tag)或someOtherFunction(tag)。

例如：

$scope.myFunction = function(tag) {
    if ($scope.editState) {
        shared.removeTag(tag)
    } else {
        shared.getImages(tag)
    }
}

HTML:

<li ng-repeat="tag in tagsList" ng-bind="tag" 
        ng-click="myFunction(tag)"></li>

一个可能的解决方案是有两个列表。一个在不处于编辑模式时显示，另一个则显示。

<span class="side-text"><a ng-click="toggleEditState()">Edit</a></span>
<ul id="fav-tags-list" class="list" ng-show="!editState">
    <li ng-repeat="tag in tagsList" ng-bind="tag" 
        ng-click="shared.getImages(tag)"></li>
</ul>
<ul id="fav-tags-list" class="list" ng-show="editState">
    <li ng-repeat="tag in tagsList" ng-bind="tag" 
        ng-click="shared.removeTag(tag)"></li>
</ul>
相关文章：