Auf angularjs ng-checked

Question

Ich versuche zu implementieren, wenn ein Benutzer ein Kontrollkästchen anklickt, zeigt es alle Produkte in der ng-Wiederholung mit einer Menge von 0 an. Wenn das Kontrollkästchen nicht aktiviert ist, werden alle Elemente angezeigt. Momentan konnte ich die Hälfte der Funktionalität bekommen.

Kontrollkästchen:

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" ng-checked="vm.OnHandQty()"> 

Tabelle

<tr ng-repeat="item in vm.items | filter :search">           
     <td ng-bind="item.itemNo"> </td> 
     <td ng-bind="item.description"></td> 
     <td ng-bind="(item.listPrice | currency)"></td> 
     <td ng-bind="item.onHandQty" ng-model="quantity"></td> 
    </tr> 

-Controller

vm.OnHandQty = function() {    
    $scope.search = {}; 

    vm.items.forEach(i => { 
     if (i.onHandQty == 2) { 
      console.log(i); 
      $scope.search = i; 
      return true; 
     } 
     else { 
      $scope.search =i; 
      return false; 
     } 
    }); 
} 

Answer 1

Ich schlage vor, würde die Umsetzung Ihrer Checkbox und Controller zu ändern:

Checkbox

<input type="checkbox" ng-model="vm.checked" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"> 

- Hier verwenden wir "ng-Modell" anstelle von "ng-geprüft" und „vm.checked "ist eine Variable, die Sie als ng-Modell für Ihre Checkbox definieren.

-Controller

$scope.search = function(item) { 
    return ($scope.vm.checked) ? item.onHandQuantity === 0: true; 
}; 

- Hier definieren wir die "ng-repeat" Filter, den Sie in Ihrer Tabelle verwenden.

Answer 2

Versuchen Sie stattdessen:

<tr ng-repeat="item in vm.items" ng-show="onoffswitch==true && item.onHandQty != 0? false : true"> 
    <td ng-bind="item.itemNo"> </td> 
    <td ng-bind="item.description"></td> 
    <td ng-bind="(item.listPrice | currency)"></td> 
    <td ng-bind="item.onHandQty" ng-model="quantity"></td> 
</tr> 

Dies zeigt nur die Zeile an, wenn onoffswitch wahr ist und onHandQty Null ist, andernfalls wird die Zeile angezeigt. Die Zeile wird also ausgeblendet, wenn onoffswitch wahr ist und onHandQty nicht Null ist.

Answer 3

Sie können ng-change und ng-Modell verwenden.

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" ng-model="vm.checked" ng-change="checkBoxChange(vm.checked)"> 

Dann von Ihnen checkBoxChange Funktion, wenden Sie Ihre Business-Logik:

vm.checkBoxChange = function(checked){ 
    if(checked){ 
     //Do something 
    }else{ 
    //Something else 
    } 
};