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

Angular 1.5 variable not working untill it has been called once

本文关键字：一次 不起作用 变量 调用 Angular      更新时间：2023-09-26

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

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

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

这不是一个大问题，但当你第一次点击它时，感觉好像有什么东西坏了，因为如果没有正确或错误，用户将不会得到任何反馈，而一旦我完成，就不应该有正确或错误

您可以更改引用如下并尝试吗。

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

并在html中更改对model.showOnlyOffline 的引用

正如@ravichandra reddy所建议的，将基元值绑定到对象。

这背后的原因是"md按钮"创建了一个新的作用域，它根本不是孤立的，但不能访问基元值。这篇文章解释得很好https://github.com/angular/angular.js/wiki/Understanding-Scopes

试试这个，这里是为您的问题创建的工作小提琴

        <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 }];
    }
相关文章：