Question

您好，感谢您查看我的问题。

我正在创建一个只列出父母及其子女的指令。每个父母都有一个复选框，允许用户打印确实检查过的父母（例如：如果用户检查父＃1和＃5，则只打印＃1和＃5）。我还有一个过滤器，允许用户“过滤”父母（超过100个）。

问题在于复选框：我希望选中的过滤器（下拉列表）会清除所有复选框。现在，如果用户检查父＃1和＃5并过滤掉5，则＃1保持选中状态。我在下面添加我的代码。非常感谢帮助我...

app.directive('isolateScopeWithController', function () {

var controller = ['$scope', 'treeFactory', '$q', function ($scope, treeFactory, $q) {

    var vm = this;

    $scope.ocw = "";

    $scope.types = [
                   {description : "All Parent", type : 2},
                   {description : "True Parent", type : 1},
                   {description : "Parent", type : 0}
               ];

     $scope.$watch('selectedType', function(){          
        // I wish I would have this function working
        uncheckAll();

    })

   function uncheckAll() {
        // uncheck all the  check box currently checked 
        // cannot do it!
    }

    init();

    function init(){

        $scope.selectedType = "2";

        $scope.ocw = {
         "parents":[
         {name: "parent1", "type": 0, children: ["name": "child1", "name": "child2"]},
         {name: "parent2", "type": 0, children: ["name": "child3", "name": "child4"]},
         ...
         {name: "parent5", "type": 1, children: ["name": "child10", "name": "child11"]}
         ]
        }
    }
    ],

  template = '<div>'+
                 '<div>'+
                    '<select ng-model="selectedType" ng-change="update(selectedType)">'+
                        '<option ng-repeat="x in types" value="{{x.type}}">{{x.description}}</option>'+
                    '</select>'+                        
                 '</div>'+                      
                 '<div>'+
                    '<button type="button" class="btn btn-default btn-primary" ng-click="printParentschecked(ocw)"> <span class="glyphicon glyphicon-print"></span> Print Selected </button>'+
                 '</div>'+
             '</div>'+
                 '<div ng-repeat="parent in ocw.parents" class="col-sm-8">'+
                    '<div ng-if="filterType(parent.type)">'+    
                         '<div class="row">'+
                            '<div class="col-sm-8">'+
                                '<span>{{parent.name}}</span>'+
                            '</div>'+
                            '<div class="col-sm-2">'+
                                '<input type="checkbox" ng-model="parent.isOpenValue" ng-click="checked(parent.name)" >'+
                            '</div>'+
                         '</div>'+
                        '<div ng-repeat="org in parent.children" class="col-sm-8">'+
                            '{{children.name}}'+
                        '</div>'
                    '</div>'+       
                 '</div>'+

             '</div>';
  return {
      restrict: 'E', 
      replace: true,
      scope: {},
      controller: controller,
      template: template,   
      transclude: true,
      link: function(scope, element, attrs, transclude) {
                scope.printParentschecked = function(ocw){
                    // print the checked parents... I can do it!
                }
                scope.filterType = function(type) {
                    //it works, it checks the value selected in the drop down and the type of the parent
                    // if they match they are shown
                if (types === 1 && type === 1) {
                    return true;
                }
                ....


          }  
      }
  };
});

P.S。可能真正的问题是我并不真正理解角度指令:(

Answer 1

试试这个：

<div class="grid">
  <div class="grid-row">
    <button class="wide">1</button>
    <button class="narrow">2</button>
    <button class="narrow">3</button>
  </div>
  <div class="grid-row">
    <button class="narrow">4</button>
    <button class="wide">5</button>
    <button class="narrow">6</button>
  </div>
  <div class="grid-row">
    <button class="narrow">7</button>
    <button class="narrow">8</button>
    <button class="wide">9</button>
  </div>
</div>

Angularjs问题与指令取消选中所有复选框

1 个答案: