current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have an angularjs page which has an ng-repeat <ul> list of data points. Each <li> has a Delete link (call this Delete 1) which when clicked needs to hide that Delete 1 link and show 2 more links in its place: Cancel and Delete (call this Delete 2). When the Cancel link is clicked, the original Delete 1 link needs to show and the Cancel and Delete 2 links need to hide. All this currently works, but now there is a new requirement.

When Delete 1 link is clicked all "Cancel and Delete 2" link pairs on other list items need to hide. As AngularJS is single action based, I create a function for deleteLinkClick and cancelLinkClick to make the required complex actions.

When you look at the controller code provided below you see the show flag being set to false, but it does not work. Suggestions?

Here is my (slim) html page:

... OTHER STUFF...
    ul
      li.address ng-repeat="data in request.theData" ng-init="showWarning=[]"
        .address-li
          .address-details
            p
              |Field 1: {{data.field1}}
              span ng-if="data.field2!=''"
                br
                |Field 2: {{data.field2}}
            span
              span.button-small.button-cancel ng-show="!showWarning[$index]" ng-click="deleteLinkClick(showWarning,$index)" Delete
              span.button-small.button-cancel ng-show="showWarning[$index]" ng-click="cancelLinkClick(showWarning,$index)" Cancel
              span.button-small.button-delete.button-warn ng-show="showWarning[$index]" ng-click="deleteAddress($index)" Delete

... OTHER STUFF...

Here is my (coffeescript) controller code:

@MyPage.controller('MyController',
  ['$scope', '$rootScope', '$location', 'NtdRequest', 'Form', '$anchorScroll'
    ($scope, $rootScope, $location, ntd_request, form, $anchorScroll) ->
      $scope.currentIndex = -1

      $scope.cancelLinkClick = (array,index) ->
        array[index] = false
        $scope.currentIndex = -1

      $scope.deleteLinkClick = (array,index) ->
        if ($scope.currentIndex != -1)
          array[$scope.currentIndex] = false
        array[index] = true
        $scope.currentIndex = index
  ]
)

Thank you in advance

-wh

share|improve this question

1 Answer 1

up vote 0 down vote

I would like to propose a more angular solution. I hope this is helpful.

First define an appropriate model:

   var app = angular.module('app', []);
     app.controller('ctrl', function ($scope) {
         $scope.model = {};
         $scope.model.data = [];
         $scope.model.data.push({ name: 'item1' });
         $scope.model.data.push({ name: 'item2' });
         $scope.model.data.push({ name: 'item3' });
         $scope.model.data.push({ name: 'item4' });
         $scope.model.selected = {};

         $scope.reallyDelete = function(item) {
             alert('Really delete item ' + item.name);
             $scope.model.selected = {};
         }

     });

We have defined a model that keeps track of the selected item, and an array of available items.

We have also defined a function called reallyDelete which is called from the UI when the second Delete link is clicked.

Here is the View:

<body ng-app="app" ng-controller="ctrl">
    <table>
        <tr ng-repeat="item in model.data">
            <td> {{item.name }}</td>
            <td><a href="#" ng-hide="model.selected == item" 
                       ng-click="model.selected=item;">Delete</a>
                <span ng-show="model.selected == item">
                    <a href="#" ng-click="reallyDelete(item)">Delete</a>&nbsp;
                    <a href="#" ng-click="model.selected={};">Cancel</a>
                </span>
            </td>
        </tr>
    </table>
</body>

We show the first Delete link by binding ng-hide to the model.selected == item expression so that the link is hidden when the selected item is the current item.

We show the second pair of links (Delete and Cancel) by binding ng-show to the expression model.selected==item so that the links are visible when the selected item is the current item.

When the Cancel link is clicked, we set the selected item to {} so that all links for each item show the unselected state (showing only the Cancel link).

Finally, we bind ng-click for the Delete link to the reallyDelete function which is defined on scope. After the delete is successful, we reset the selected item so that all links for each item show the unselected state again.

By using a simplified model, and taking advantage of angular binding expressions, it is possible to achieve fairly complex behavior.

Here is a Plunker

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.