3

I'm trying to implement a keyboard navigation in a multi-level List. Therefor i try to give every Item in the List a unique ID, like 5.2.1(category.item.subitem).

I already tried a lot of stuff, like ng-init the index to a variable on ng-repeat, an other approaches using directives, but all had the problem so far that when i change the list (delete items for example) my Custom Index doesn't update!

I made a simple Plnkr here: You can delete an item or subitem and see that the "real" index and the customindex don't relate.

http://plnkr.co/edit/BsRCNAqM7jWkeAJ9rkLN?p=preview

at the moment i have a custom directive called customIndex that gets the Index as attribute.

<li ng-repeat="subitem in item.subitem" custom-Index="$parent.$index+'.'+$index">

and inside the directive i simply $eval the attribute:

.directive('customIndex', function(){
    return{
    restrict:'A',
    link: function(scope, el, attrs){
      scope.myIndex = scope.$eval(attrs.customIndex);
    }
  }
})

But this, like all other solutions i tried, doesn't work.

I think this must be a common kind of problem. Does anyone have any suggestions for me?

THANKS Markus

1
  • Oh, or maybe if there is some easier way to implement multilevel keyboard navigation? Oct 7, 2015 at 12:50

2 Answers 2

3

I think you overcomplicated yourself. Try only this piece of markup and no need for custom directive or something else:

 <ul>
    <li ng-repeat="item in data">
      "Real"-index:{{$index}} | myIndex:{{myIndex = $index}}} | Item:{{item.itemName}} <button ng-click="data.splice(data.indexOf(item),1)">Del</button>
    <ul>
      <li ng-repeat="subitem in item.subitem">
        "Real"-index:{{$index}} | myIndex:{{myIndex = $parent.$index+'.'+$index}} | Subitem:{{subitem}} <button ng-click="item.subitem.splice(item.subitem.indexOf(subitem),1); ">Del</button>
      </li>
    </ul>
    </li>
  </ul>

ng-init will never work for you because it is executed only when directive is compiled. With custom directive it will never work because the scope item will be of the item that you delete and you dont' have access to the entire list.

Here is the demo: http://plnkr.co/edit/Nr4cJ2m3JqI8NyLFnQhC?p=preview

4
  • 1
    Oh wow, yeah thanks you are right! I never thought about just declaring variables just in the template inside double curly braces. Oct 7, 2015 at 14:43
  • Please mark the answer as the right one if this is the case, for further references.
    – Diana R
    Oct 7, 2015 at 14:57
  • well actually, the problem is, if i just write it in curly braces, it gets rendered to the screen of course:( i need to attach it to the scope, but not render it out of course. and i don't want to simply hide it. Oct 7, 2015 at 15:51
  • actually at the moment i don't think this is the right approach to multilevel navigation. my setup works fine as long as i go down the list. when i reach the end of a category i simply set the next category to (activecategory+1, 0), because i know that the first item is going to have index 0. but when i want to go up the list, there is no way of knowing what index the last item of the previous category has. So i think i'll go for a different approach. Oct 7, 2015 at 21:27
0

so, in the meantime i found a solution. Maybe not the best, but it works.

i could attach the needed parameters to a directive attribute and set a $watch on this attribute to stay synchronised with any changes caused by deleting/filtering etc. for example:

<div item-Index="[$parent.$index,$index,-1,$first, $last]"</div>

and the directive hast the following function in the link function:

scope.$watch(attrs.itemIndex, function(value) {
            scope.itemIndex = value;
        });

now every item has a unique index defined.

The multilevel keyboard navigation also works now, but this is beyond the scope of this question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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