I am currently working on creating a filter in AngularJS without relying on jQuery. To achieve this, I am using a custom directive to generate a popup that includes a checkbox. However, I have encountered a couple of issues.
1. I have created two popups using the ng-repeat directive and passing arguments to the directive. When I pass a simple string as shown below, everything works fine:
<input checkbox-all="0-isSelected-id1" class="clsInput" />
app.directive('checkboxAll', function () {
return function(scope, iElement, iAttrs) {
// We can split this string
var parts = iAttrs.checkboxAll.split('-');
});
However, when I try to pass the index like this:
<input checkbox-all="{{$index}}-isSelected-id{{$index}}" class="clsInput" />
app.directive('checkboxAll', function () {
return function(scope, iElement, iAttrs) {
// It will return undefined
var parts = iAttrs.checkboxAll.split('-');
});
I need to pass the index to the directive since all of this code is within an ng-repeat loop.
2. These two popups have the same class but different IDs. I want to display these popups when clicking on two separate div elements. I would like to achieve this without using jQuery and apply two styles to position the popup (left and top) every time it is clicked.
Requirements:
https://i.sstatic.net/K61yA.png
https://i.sstatic.net/lpNF6.png
Below is the code I have been working on, although it is not perfect: