Angularjs 选择框中的角度$范围和变量混淆

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

在点击按钮时过滤效果很好，但我在下拉列表中遇到了问题

设置如下：

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

我遇到的问题是，页面上的区域变量将html注释视为Ref:1.{{category}.{metric}.0.{area}

的一部分，但函数shouldShow中对它的引用不会更新

---

我是如何理解范围的？我是如何做到这一点的？

您希望在div中看到什么。目前它们中没有任何内容？它们由指令填写。不过，这并不重要，因为我只想显示/隐藏div，而我无法正确读取变量。所以显示/隐藏不起作用的问题是什么？在scope上创建一个$scope.selected={}，然后移动所有属性，比如$scope.selected.category，$scope.selected.metric，问题主要是您的ng模型没有点

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