Question

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

这是我的标记：

<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;
        }
    }
}]);

我如何实现我想要的目标？如果有一个更聪明的解决方案，我会接受它。

Answer 1

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

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

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

Here是一个plnkr，显示我对几个div的解决方案，为你的用例实现它不应该很难。

Answer 2

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

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

Answer 3

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

例如：

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

在AngularJS中切换编辑状态并将项目更改为另一个功能

3 个答案: