2013-05-03 8 views
7

フォームの名前を取得すると、コントローラのスコープからフォームオブジェクトを取得しようとしています。 これはうまくいきますが、ng-switchでフォームを作成すると、フォームはスコープ内に決して表示されません。ng-switchを使用した角型

ビュー

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

コントローラ

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

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

私はNG-スイッチを削除した場合、私は、フォームのOBJとして$の範囲からプロパティ "theForm" を参照してくださいすることができます。

どのようにするか考えてください。私は異なる名前の2つのフォームを使用してng-showを使用したくありません。ここで

は一例であり、 "-動作していない" http://plnkr.co/edit/CnfLb6?p=preview

+0

THXを。これに1時間を費やした。私が得た症状は、$ validと$ dirtyが私には利用できなくなったということでした。 – ErichBSchulz

答えて

9

ngSwitchは新しいスコープを作成するためです。 ($$childHeadのスコープの値がconsole.logとなっている場合は、theFormが表示されます。これはngSwitchスコープです)。

フォームが常に同じ名前になります場合は、単純に、フォーム内のngSwitch ES置くことができます。

<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

ありがとう、私はあなたの答えで期待以上に多くを学んだ。 – blackjid

+1

'ng-switch on'を属性として使うのではなく、読みやすくするために別のタグとして使うことができます。例: ' ...' – Abilash

+1

@AbilashもしあなたがIE8以下を気にしているなら、[document.createElement'を[Internet Explorer互換性ガイド](http://docs.angularjs.org/guide/ie) –

関連する問題