Question

我试图在不使用jquery的情况下在angularJs中开发一个过滤器。我使用自定义指令创建一个包含复选框的弹出窗口。我有两个疑问

1。这里我有2个弹出窗口，我使用ng-repeat创建，我在指令中传递一些参数。如果我像bellow一样传递简单的字符串，它将正常工作

      <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已在范围内定义，您可以通过checkboxAll在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;
    });
  });
});

至于弹出式行为，我添加了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;
    });

};

}）;

使用angularJS自定义弹出窗口

2 个答案: