Question

我已经设置了一个系统，我可以根据按钮点击和下拉列表选择过滤显示一些报告数据。

按钮点击过滤效果很好但我在下拉列表中遇到了麻烦。

设置如下：

... more buttons above with the same as below
    <div class="col col-center">
        <button class="button button-outline button-positive" ng-click="setMetric('2')">Personal</button>
    </div>
    <div class="col col-center">
        <button class="button button-outline button-positive" ng-click="setMetric('3')">Business</button>
    </div>
</div>

<div class="list">
    <label class="item item-input item-select">
        <div class="input-label">
            Area
        </div>
        <select ng-options="z.id as z.zone for z in zones" ng-model="area"></select>
    </label>
</div>

<p>Ref: 1.{{category}}.{{metric}}.0.{{area}}</p> <!-- this updates fine -->

<div ng-show="shouldShow(1.1.1.0.1)" line-chart chart-data="data"></div>
<div ng-show="shouldShow(1.1.1.0.2)" line-chart chart-data="data2"></div>

和控制器：

    $scope.category = '1';
    $scope.metric = '1';
    $scope.area = '1';

    $scope.zones = [
        {'zone':'National',         'id':'1'},
        {'zone':'QLD',              'id':'2'},
        {'zone':'All other areas',  'id':'3'},
        {'zone':'Affluent',         'id':'4'},
        {'zone':'Mass',             'id':'5'}
    ];

    $scope.setCategory = function(category) {
        $scope.category = category;
    };

    $scope.setMetric = function(metric) {
        $scope.metric = metric;
    };

    $scope.setArea = function(area) {
        $scope.area = area;
    };

    $scope.getArea = function() {
        return $scope.area;
    };

    $scope.shouldShow = function () {
        console.log("1." + $scope.category + "." + $scope.metric + ".0." + $scope.area); // This does not
        switch ("1." + $scope.category + "." + $scope.metric + ".0." + $scope.area) {
            case "1.1.1.0.1":
                return true;
                break;
            case "1.1.1.0.2":
                return true;
                break;
            default: return false;
        }
    };

我遇到的问题是页面上的区域变量（请参阅html注释作为

Ref：1。{{category}}。{{metric}}的一部分。 {{area}}

）会更新，但函数shouldShow（）中对它的引用不会更新。

我如何误解范围以及如何使其发挥作用？

选择框混淆的角度$ scope和vars

0 个答案: