CODEWITHSUNDEEP
javascripthtmlangularjs
Chrillewoodz
Chrillewoodz

Reputation: 28318

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

I got an edit button and a list containing items. When I click edit I want to go into "edit mode" and when in edit mode I want to be able to click on items in the list and remove them on click. When not in edit mode these items calls another function so I'm not sure how to achieve this.

Here's my markup:

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

And the controller which handles the edit state mode:

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

How would I achieve what I want here? If there's a smarter solution I'll take it.

Upvotes: 0

Views: 1088

Answers (3)

Sam
Sam

Reputation: 31

One possible solution is to have two lists. One that displays when not in edit mode and the other that does.

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

Upvotes: 1

Bricktop
Bricktop

Reputation: 1549

I think there is a very short and elegant solution for this:

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

If select is true then a() is called, otherwise b() is called.

Here is a plnkr showing my solution on a couple of divs, implementing it for your use case shouldn't be hard.

Upvotes: 3

Roco CTZ
Roco CTZ

Reputation: 1117

You can create a function that calls either shared.removeTag(tag) or someOtherFunction(tag) depending on $scope.editState variable.

For example:

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

Upvotes: 1

Related Questions