Toxicable Toxicable - 7 months ago 30
Javascript Question

Angular 1.5 variable not working untill it has been called once

So I have this list of items as below, that the user has two filtering options on. One is a select menu which works perfect but the other is a button, which wne clicked it will only show the objects that have a certain field.

The problem Im having with this is that upon first loading the page the variable that the button changes is not showing untill I click the button, now this is only for debugging but either way it does not change the filtering in the list

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


where
data.status
is a boolean and
data.timezone
is a string timezone

and in my controller I have it set so that

$scope.showOnlyOffline = false;


It's not a huge problem but it feels like something is broken when you first click it since the user would not get any feedback without the true or false which shouldn't be there once im done

Answer

Can you change reference as below and try.

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

and in html change the references to model.showOnlyOffline