Javascript Angular 1.5变量在调用一次之前不工作

因此，我有如下项目列表，用户有两个过滤选项。一个是“选择”菜单，工作正常，但另一个是按钮，单击它将仅显示具有特定字段的对象

我遇到的问题是，在第一次加载页面时，按钮更改的变量在我单击按钮之前不会显示，现在这只是为了调试，但无论如何它都不会更改列表中的筛选

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

---

这不是一个大问题，但当你第一次点击它时，感觉好像有什么东西坏了，因为如果没有正确或错误，用户将无法获得任何反馈，而正确或错误在即时消息完成后就不应该出现了。

你能像下面那样更改引用并尝试一下吗

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

---

在html中，按照@ravichandra reddy的建议，将引用更改为model.showOnlyOffline

，将原语值绑定到对象

这背后的原因是“md按钮”创建了一个新的作用域，这个作用域根本不是孤立的，但不能访问原语值。这篇文章解释得很好

试试这个，这里是为您的问题创建的

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

---

哦，我明白了。感谢您解释原因是md-button的作用域。它在me按钮作用域内创建了一个名为showOnlyOffline的新变量。所以，通过创建model.variable，您要求它使用控制器的作用域。

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