Angularjs 在不修改模型的情况下为视图使用变量

我有一个对象，里面有一个项目列表X，每个X有一个Y的列表，每个Y有一个Z的列表

我想在单击按钮时隐藏跨度。我可以通过向每个对象添加一个属性“visible”并

ng click=“obj.visible=！obj.visible”

轻松做到这一点。 但是这个解决方案意味着修改对象，我真的不希望这样。 有更好的解决办法吗

我尝试使用track by或一种hashmap，但没有真正成功。 如果需要保存模型，是否需要修改模型并稍后清除

angular.module（'myModule'，[]）；
角度模块（“myModule”）
.控制器（“DemoCtrl”，DemoCtrl）；
demoCtrl.$inject=[“$scope”]；
//demoCtrl
函数demoCtrl（$scope）{
vm=这个；
vm.xObjects=[
{“xname”：“x1”，
“Ys”：[{
“yname”：“y1”，
“Zs”：[{“zname”：“z1”}，
{“zname”：“z2”}]
},
{
“yname”：“y2”，
“Zs”：[{“zname”：“z3”}，
{“zname”：“z4”}]
}]
},
{“xname”：“x2”，
“Ys”：[{
“yname”：“y3”，
“Zs”：[{“zname”：“z5”}，
{“zname”：“z6”}]
},
{
“yname”：“y4”，
“Zs”：[{“zname”：“z7”}，
{“zname”：“z8”}]
}]
}
];
vm.addX=函数（）{
push（{“xname”：“foo”，Ys:[]}）；
}
vm.addY=函数（x）{
x、 推送（{“Yname”：“bar”，Zs:[]}）；
}
vm.addZ=函数（y）{
y、 推送（{“Zname”：“too”}）；
}
}

xobject.xname={{xobject.xname}
崩溃
---yobject.xname={{yobject.yname}
崩溃
--{{$index}--zobject.xname={{{zobject.zname}
崩溃
-添加Z
-——加上Y
加X

您可以通过在控制器范围中创建名为

hidden

的属性来实现这一点。要隐藏嵌套元素，可以使用数组

HTML:

---

您可以通过在控制器作用域中创建名为

hidden

的属性来实现这一点。要隐藏嵌套元素，可以使用数组

HTML:

---

这并不能真正回答这个问题，因为我们不能同时隐藏多个俯冲。另一种方法是在每个对象上设置

hidden

属性。您可以稍后删除这些属性。这并不能真正回答问题，因为这样我们无法同时隐藏多个俯冲。另一种方法是在每个对象上隐藏

属性。您可以稍后删除这些属性。
<div ng-controller="DemoCtrl">
    <div ng-repeat="x in xs">
        <span ng-hide="hidden == $index">{{ x.name }}</span>
        <button ng-click="hide($index)">Collapse</button>

        <div ng-repeat="y in x.ys">
            <span ng-hide="hidden == [x.$index, $index]">{{ y.name }}</span>
            <button ng-click="hide([x.$index, $index])">Collapse</button>

            <div ng-repeat="z in y.zs">
                <span ng-hide="hidden == [x.$index, y.$index, $index]">{{ z.name }}</span>
                <button ng-click="hide([x.$index, y.$index, $index])">Collapse</button>
            </div>
        </div>
    </div>
</div>

angular.module("app", [])
    .controller("DemoCtrl", function($scope) {
        $scope.xs = [...];  // Your data here

        $scope.hidden = -1; // Nothing hidden yet
        $scope.hide = function(object) {
            $scope.hidden = object;
        };
    });