2013-05-03 9 views
7

Ich versuche, ein Formularobjekt aus dem Bereich eines Controllers zu bekommen, wenn ich einen Namen zu de Form bekomme. Es funktioniert gut, aber wenn ich das Formular mit einem ng-Schalter erstellen, wird das Formular nie im Bereich angezeigt.Winkelformulare mit ng-Schalter

die Ansicht

<body ng-controller="MainCtrl"> 

    <div ng-switch on="type"> 
     <form name="theForm" ng-switch-when="1"> 
     <label>Form 1</label> 
     <input type="text"/> 
     </form> 
     <form name="theForm" ng-switch-when="2"> 
     <label>Form 2</label> 
     <input type="text"/> 
     <input type="text"/> 
     </form> 

    </div> 

    <button ng-click="showScope()">Show scope</button> 
</body> 

die Controller

app.controller('MainCtrl', function($scope) { 
    $scope.type = 1; 

    $scope.showScope = function(){ 
    console.log($scope); 
    }; 
}); 

Wenn ich den ng-Schalter entferne ich die Eigenschaft "theForm" aus dem $ Umfang als Form obj sehen kann.

Irgendeine Idee, wie es geht. Ich möchte die beiden Formen nicht mit anderen Namen haben und ng-show verwenden.

Hier ist das Beispiel „nicht arbeit“ http://plnkr.co/edit/CnfLb6?p=preview

+0

thx. verbrachte eine Stunde damit. Das Symptom, das ich bekam, war, dass $ valide und $ dirty für mich nicht verfügbar waren. – ErichBSchulz

Antwort

9

Dies liegt daran, ngSwitch neue Möglichkeiten schafft. (Wenn Sie sich den $$childHead Wert des Bereichs ansehen, der console.log 'd erhält, können Sie darin theForm sehen. Dies ist der ngSwitch Bereich).

Wenn das Formular immer der gleiche Name sein wird, können Sie einfach setzen die ngSwitch es in der Form:

<form name="theForm"> 
    <div ng-switch on="type"> 
    <div ng-switch-when="1"> 
     <label>Form 1</label> 
     <input type="text"/> 
    </div> 
    <div ng-switch-when="2"> 
     <label>Form 2</label> 
     <input type="text"/> 
    </div> 
    </div> 
</form> 
+0

Danke, ich habe viel mehr gelernt, als ich mit deiner Antwort erwartet habe. – blackjid

+1

Anstatt "ng-switch on" als Attribut zu verwenden, können wir es als separates Tag verwenden, um lesbarer zu machen. Beispiel: ' ...' – Abilash

+1

@Abilash Wahr, aber wenn Sie sich für IE 8 und darunter interessieren, achten Sie darauf, 'document.createElement' gemäß [dem Internet Explorer zu verwenden Kompatibilitätsleitfaden] (http://docs.angularjs.org/guide/ie) –