Угловая переменная 1.5 не работает до тех пор, пока она не была вызвана один раз

Question

Итак, у меня есть этот список элементов, как показано ниже, что у пользователя есть две опции фильтрации. Один из них - это меню выбора, которое отлично работает, а другое - кнопка, на которую щелкнули только объекты, имеющие определенное поле.

Проблема, связанная с этим, заключается в том, что при первой загрузке страницы переменная, которую кнопка изменения не показывает, пока я не нажму кнопку, теперь это только для отладки, но в любом случае она не изменяет фильтрацию в списке

<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> 

где data.status является логическим и data.timezone является строка часового пояса

и в моем контроллере он у меня установлен так, что

$scope.showOnlyOffline = false; 

Это не огромная проблема, но кажется, что что-то сломано, когда вы впервые нажмете его, так как пользователь не получит никакой обратной связи без истинного или ложного, который не должен быть там, как только он сделал

Answer 1

Можете ли вы изменить ссылку как ниже и попробуйте.

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

и в HTML изменить ссылки на model.showOnlyOffline

Answer 2

Как предложил @ravichandra Редди, связывают элементарное значение для объекта.

Причина в том, что «md-button» создает новую область, которая вообще не изолирована, но не имеет доступа к первообразному значению. Эта статья объяснить это очень хорошо https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 3

попробовать это, здесь working fiddle создан для вашей проблемы

 <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> 

контроллер

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 }]; 
    }