Angular 1.5 Variable funktioniert nicht, bis es einmal aufgerufen wurde

Question

So habe ich diese Liste von Elementen wie folgt, dass der Benutzer zwei Filteroptionen auf hat. Eines ist ein Auswahlmenü, das perfekt funktioniert, aber das andere ist eine Schaltfläche, auf die geklickt wird, werden nur die Objekte angezeigt, die ein bestimmtes Feld haben.

Das Problem dabei ist, dass beim ersten Laden der Seite die Variable, die die Schaltfläche ändert, nicht angezeigt wird, bis ich auf die Schaltfläche klicke, jetzt ist dies nur zum Debuggen, aber so oder so ändert es die Filterung in der Liste nicht

<div flex="10"> 
    <md-button type="submit" ng-click="showOnlyOffline = !showOnlyOffline"> 
     {{showOnlyOffline == false ? 'Show All' : 'Only Show Offline'}} 
    </md-button> 
</div> 

{{showOnlyOffline }} 

<div ng-repeat="data in dataArray |filter :{timezone: selectedTimeZone} | filter :{status: showOnlyOffline } " flex="45"> 
    {{data.name}} 
    {{data.status}} 
</div> 

wo data.status ist ein boolean und data.timezone ist eine Zeichenfolge Zeitzone

und in meinem Controller ich habe es so eingestellt, dass

$scope.showOnlyOffline = false; 

Es ist nicht ein großes Problem, aber es fühlt sich an wie etwas gebrochen ist, wenn Sie es zuerst klicken, da der Benutzer keine Rückmeldung erhalten würde ohne die wahre oder falsche, die nicht einmal da sein sollte

Answer 1

Können Sie Referenz ändern als unten und versuchen Sie es.

$scope.model = {}; 
$scope.model.showOnlyOffline = false; 

und in html die Verweise auf model.showOnlyOffline

Answer 2

Als @ravichandra Reddy verändern den Grundwert auf ein Objekt vorgeschlagen, binden.

Der Grund dafür ist, dass "md-button" einen neuen Bereich erstellt, der nicht isoliert ist, aber keinen Zugriff auf den primitiven Wert hat. Dieser Artikel erklärt es sehr gut https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 3

dies versuchen, hier ist working fiddle für Ihr Problem erstellt

 <div ng-app="myApp"> 
      <div ng-controller="MyCtrl"> 
       <div flex="10"> 
        <md-button type="submit" ng-click="showOnlyOffline = !showOnlyOffline"> 
         {{showOnlyOffline && 'Only Show Offline' || 'Show All'}} 
        </md-button> 
       </div> 
       {{showOnlyOffline }} 
       <div ng-repeat="data in dataArray | filter :{status: showOnlyOffline } " flex="45"> 
        {{data.name}} {{data.status}} 
       </div> 
      </div> 
     </div> 

Controller

var myApp = angular.module('myApp', []); 

    function MyCtrl($scope) { 
     $scope.showOnlyOffline = false; 
     $scope.selectedTimeZone = new Date(); 
     $scope.dataArray = [{ name: "asd", status: true, timezone: $scope.selectedTimeZone }, { name: "qwerty", status: false, timezone: $scope.selectedTimeZone }]; 
    }