Question

所以我有以下项目列表，用户有两个过滤选项。一个是完美的选择菜单，另一个是按钮，点击它只会显示具有特定字段的对象。

我遇到的问题是，在第一次加载页面时，按钮更改的变量不会显示，直到我单击按钮，现在这只是用于调试，但无论哪种方式都不会更改列表中的过滤< / p>

<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 reddy建议的那样，将原始值绑定到一个对象。

这背后的原因是“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 }];
    }

Angular 1.5变量不起作用，直到它被调用一次

3 个答案: