Custom popup using angularJS

Question

I'm trying to develop one filter in angularJs without using jquery. I am using custom directive to create one popup including checkbox. I have 2 doubts

1. Here I have 2 popup which I created using ng-repeat and I am passing some arguments in directive. If I pass simple string like bellow it will work properly

      <input checkbox-all="0-isSelected-id1"  class="clsInput" />
      app.directive('checkboxAll', function () {
      return function(scope, iElement, iAttrs) {

         //here we can split this string 
         var parts = iAttrs.checkboxAll.split('-');
        });

But If I pass like this

      <input checkbox-all="{{$index}}-isSelected-id{{$index}}"  class="clsInput" />
      app.directive('checkboxAll', function () {
      return function(scope, iElement, iAttrs) {

         //it will come undefined
         var parts = iAttrs.checkboxAll.split('-');
        });

I need to pass that index to that directive because this all code is inside one ng-repeat.

2. This two popup have same class and different id, I want to show this popup on click of 2 div. I want to do this without using jquery. on each click I want to set two styles to that popup(left and top for positioning that div in proper place)

requirement

Here I added my code, it is not perfect

code

Haris · Accepted Answer · 2016-12-06 09:50:00Z

Check out this jsFiddle

To pass the index to a directive, there is no need to pass the index in an attribute. $index is already defined in the scope, you access it in the checkboxAll directive by scope.$index.

app.directive('checkboxAll', function () {
return function(scope, iElement, iAttrs) {
var arrayContent=scope.mainList[scope.$index].list;

iElement.attr('type','checkbox');
iElement.attr('value','All');
//iElement.attr('id','All'+parts[2]);//check this id in design
iElement.bind('change', function (evt) {
var selectedval=evt.currentTarget.value;
  scope.$apply(function () {
    var setValue = iElement.prop('checked');
    angular.forEach(arrayContent,function(v){
        v.isSelected=setValue;
    });
  });
});

As for popup behaviour, I have added div.subpart1 as a child of div.sub1. div.subpart1 has position:absolute, so you can set the margin-left property to show it as a popup.

And to control visibility of the popups, I have added an array $scope.IsVisible=[false,false], which has the visibility states of all popups.

The HTML is here:

<div class="sub1" >
<div class="subpart1" ng-repeat="val in mainList" ng-click="click($event,$index)" >
  <div id={{val.name}} class="mainPopup" ng-show="IsVisible[$index]" >
    <div class="rowSep">
  <input checkbox-all class="clsInput" /> 
       <div class="sub" ng-click="testa($event,val.list)" parent="Allid{{$index}}"> All</div>
    </div>
    <div ng-repeat="elem in val.list" class="rowSep">
      <input type="checkbox" ng-model="elem.isSelected" class="clsInput" /> 
      <div class="sub" ng-click="testa($event,val.list)"> {{elem.desc}}</div>
    </div>
</div>
</div>
</div>

thanks..we can use this same concept in my design also...thanks for your support..

Morteza QorbanAlizade · Accepted Answer · 2016-12-06 08:32:04Z

Use this jsfiddle to check all,

HTML

<div>
<ul ng-controller="checkboxController">
    <li>
        <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /> Check All
    </li>
    <li ng-repeat="item in Items">
        <label>
          <input type="checkbox" ng-model="item.Selected" /> {{item.Name}}
        </label>
    </li>
</ul>

JS

angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {


$scope.Items = [{
    Name: "Item one"
}, {
    Name: "Item two"
}, {
    Name: "Item three"
}];
$scope.checkAll = function () {
    if ($scope.selectedAll) {
        $scope.selectedAll = true;
    } else {
        $scope.selectedAll = false;
    }
    angular.forEach($scope.Items, function (item) {
        item.Selected = $scope.selectedAll;
    });

};

});

Collectives™ on Stack Overflow

Custom popup using angularJS

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related