使用angularJS的自定義彈出框

Question

我試圖在angularJs中開發一個過濾器而不使用jquery。我正在使用自定義指令來創建一個包含複選框的彈出窗口。我有2個疑問

1.在這裏我有2個彈出式窗口，我使用ng-repeat創建的，我在指令中傳遞了一些參數。如果我通過簡單的字符串像婁它將正常工作

 <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('-'); 
     }); 

但是如果我通過這樣的

 <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('-'); 
     }); 

我需要那個索引傳遞給指令，因爲這所有的代碼裏面一個ng-repeat。

2.這兩個彈出有相同的類和不同的ID，我想顯示此點擊2 div彈出。我想這樣做，而不使用jQuery。每次點擊我想兩種風格設定爲彈出（左和頂部定位在合適的位置DIV）

要求

在這裏，我將我的代碼它並不完美

code

Answer 1

看看這個jsFiddle

到索引傳遞給一個指令，就沒有必要通過索引的屬性。 $index已在範圍內定義，您可以通過scope.$index訪問checkboxAll指令。

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

至於彈出行爲，我已經加入div.subpart1作爲div.sub1一個孩子。 div.subpart1已有position:absolute，因此您可以設置margin-left屬性將其顯示爲彈出窗口。

爲了控制彈出窗口的可見性，我添加了一個數組$scope.IsVisible=[false,false]，它具有所有彈出窗口的可見性狀態。

的HTML是在這裏：

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

Answer 2

使用此jsfiddle檢查所有，

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

}; 

}）;