以編程方式取消選中AngularJS中的ng-checkbox，從數組中移除

我正在使用多個複選框將它們的值推送到數組中，以用作數據集過濾的參數。以編程方式取消選中AngularJS中的ng-checkbox，從數組中移除

的要求是：

父類別的選擇顯示子過濾器。
如果家長沒有被選中它所有的孩子應該是選中（假）自動（否則會被隱藏，並且仍然如此）
顯示有源濾波器
上單擊刪除有源濾波器（也取消他們相應的複選框以編程方式）。
清除所有過濾器並取消選中所有複選框。

我目前的代碼在下面，但請參閱附件提琴。

$scope.IsChecked = false; 
$scope.ActiveFilters = []; 

$scope.clearFilters = function() { 
    $scope.ActiveFilters = []; 
}; 

$scope.ModifyFilter = function (IsChecked, Filter) { 
    console.log(IsChecked); 
    if (IsChecked) { 
    $scope.ActiveFilters.push(Filter); 
    } 
    else { 
    var indexz = $scope.ActiveFilters.indexOf(Filter); 
    $scope.ActiveFilters.splice(indexz, 1); 
    } 
};

具有半工作示範甲小提琴是here

- 編輯 -

進一步解釋：當一個複選框被選中它推它的值到陣列。如果我通過在小提琴底部的「活動過濾器」部分中單擊它的名稱從陣列中刪除它，那麼它不會取消選中該複選框。點擊「清除過濾器」也沒有。

來源

2015-05-04 Taylorsuk

不明白什麼問題... –

請參閱編輯。謝謝 – Taylorsuk

問題在於你的html綁定。所以請在這裏發佈此代碼。您使用「IsChecked」變量。這是爲循環的每次迭代創建的局部作用域變量。你不能從腳本代碼中改變它。

更新的HTML：

<body ng-app="DemoApp" ng-controller="DashboardCtrl"> 

    <div ng-repeat="group in Filters"> 

     <input type="checkbox" value="{{group.title}}" ng-model="CheckboxParent" /> 
      {{group.title}} 

     <div ng-show="CheckboxParent" class="animate-show" ng-repeat="filter in group.filters"> 

      <input type="checkbox" class="filterChild" value="{{filter.name}}" ng-model="filter.checked" ng-change="ModifyFilter(filter.checked,filter)"/> 
       {{filter.name}} 
     </div> 
    </div> 

    <div> 
     <h4>Active Filters</h4> 

     <p class="clear-filters" ng-click="clearFilters()">Clear Filters</p> 
     <ul ng-repeat="activeFilter in ActiveFilters"> 
      <li ng-model="activeFilter.checked" ng-click="removeFilter(ModifyFilter(activeFilter.checked,activeFilter))">{{activeFilter.name}}</li> 
     </ul> 
    </div> 

</body>

更新腳本：

var app = angular.module("DemoApp", []) 

app.controller("DashboardCtrl", function($scope) { 

    $scope.clearFilters = function() { 
     angular.forEach($scope.Filters[0].filters, function(filter) { 
      filter.checked = false; 
     }); 
     $scope.ActiveFilters = []; 
    }; 

    $scope.IsChecked = false; 
    $scope.ActiveFilters = []; 

    $scope.ModifyFilter = function (IsChecked, Filter) { 
     console.log(IsChecked); 
     if (IsChecked) { 
     $scope.ActiveFilters.push(Filter); 
     } 
     else { 
     var indexz = $scope.ActiveFilters.indexOf(Filter); 
     $scope.ActiveFilters.splice(indexz, 1); 
     } 
    }; 


    $scope.Filters = 
     [ 
     { 
      "title": "Equipment", 
      "filters": [ 
       { name: "Rope", checked: false }, 
       { name: "Cables", checked: false }, 
       { name: "Dowel", checked: false }, 
       { name: "Ball", checked: false } 
      ] 
     } 
    ]; 
});

看着我的JS小提琴解決方案：JsFiddle

來源

2015-05-04 14:22:05

我無法鏈接到你的小提琴... – Taylorsuk

我有一個錯誤或堆棧溢出有最糟糕的用戶界面。我無法以正確的方式發佈鏈接。從[] –

複製此代碼它不允許點擊時刪除過濾器。 https://jsfiddle.net/z5sba90g/4/請參閱這裏使用按鈕。 – Taylorsuk

以編程方式取消選中AngularJS中的ng-checkbox，從數組中移除

回答

相關問題