Verwenden Variable für die Ansicht ohne Modifizieren des Modells

Ich habe ein Objekt mit einer Liste von Elementen X innen, jedes X hat Liste von Y und jedes Y hat eine Liste von Z.Verwenden Variable für die Ansicht ohne Modifizieren des Modells

Ich möchte die Spanne verbergen wenn Sie auf den Knopf klicken. Ich kann das leicht tun, indem ich jedem meiner Objekte eine Eigenschaft "visible" hinzufüge und ng-click="obj.visible = !obj.visible". Aber diese Lösung bedeutet, das Objekt zu verändern, und das will ich nicht wirklich. Gibt es eine bessere Lösung?

Ich habe versucht, Track by oder eine Art hashmap, aber ohne wirklichen Erfolg zu verwenden. Sollte ich das Modell ändern und es später löschen, wenn ich es speichern muss?

angular.module('myModule', []); 
 

 
    angular.module("myModule") 
 
     .controller("DemoCtrl", demoCtrl); 
 

 
    demoCtrl.$inject = ["$scope"]; 
 
    //demoCtrl 
 
    function demoCtrl($scope) { 
 
     vm = this; 
 
     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 = function(){ 
 
     vm.xObjects.push({ "xname" : "foo", Ys : []}); 
 
     } 
 
     vm.addY = function(x){ 
 
     x.Ys.push({ "Yname" : "bar", Zs : []}); 
 
     } 
 
     vm.addZ = function(y){ 
 
     y.Zs.push({ "Zname" : "too"}); 
 
     } 
 
    }

<html> 
 
     <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
     </head> 
 
     <body data-ng-app="myModule"> 
 
     <div data-ng-controller="DemoCtrl as demoCtrl" > 
 
      <div data-ng-repeat="xobject in demoCtrl.xObjects"> 
 
      <span data-ng-hide="">xobject.xname = {{xobject.xname}}</span> 
 
      <button data-ng-click="">collapse</button> 
 
      <div data-ng-repeat="yobject in xobject.Ys"> 
 
       <span data-ng-hide="">- - -yobject.xname = {{yobject.yname}}</span> 
 
       <button data-ng-click="">collapse</button> 
 
       
 
       <div data-ng-repeat="zobject in yobject.Zs track by $index"> 
 
       <span data-ng-hide="">- - -{{$index}}- - -zobject.xname = {{zobject.zname}}</span> 
 
       <button data-ng-click="">collapse</button> 
 
       </div> 
 
       
 
       - - - - - -<button data-ng-click="demoCtrl.addZ(yobject)">add Z </button> 
 
      </div> 
 
      - - -<button data-ng-click="demoCtrl.addY(xobject)">add Y </button> 
 
      </div> 
 
     <button data-ng-click="demoCtrl.addX()">add X </button> 
 
     </div> 
 
    </body> 
 
</html>

Quelle

2016-07-20 dufaux

Sie können durch die Schaffung Eigenschaft namens hidden im Steuerungsbereich tun. Um verschachtelte Elemente auszublenden, können Sie Arrays verwenden.

HTML:

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

Mit diesem Controller:

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

Quelle

2016-07-20 09:41:01 mere

das wirklich nicht auf die Frage beantworten, weil damit wir können nicht mehrere Tauchgang in der gleichen Zeit verstecken. – dufaux

Eine andere Möglichkeit besteht darin, jedem Objekt eine versteckte Eigenschaft zuzuweisen. Sie können diese Eigenschaften später löschen. – mere

Verwenden Variable für die Ansicht ohne Modifizieren des Modells

Antwort

Verwandte Themen