2013-04-08 25 views
6


私は選択要素のためにオンザフライでオプションのテンプレートを変更しようとしています。ここで私がしようとしているのは、選択肢があります。これは、ユーザーが学生を選択するときにどのような情報を見たいかを選択できるようにします。ユーザーが「Basic」を選択した場合、StudentクラスのIdプロパティとNameプロパティだけが表示されます。ユーザーが「詳細」を選択すると、Id、Name、Gradeが表示されます。あなたは私がNG-テンプレート「基本」と「詳細」の両方のコードを複製しています見ることができるように、現在の実装では、内部にng-includeを持つことは可能ですか?

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <title></title> 
    <script type="text/ng-template" id="Basic"> 
     <select ng-model="selectedItem"> 
     <option ng-repeat="student in Students"> 
      {{student.Id}} - {{student.Name}} 
     </option> 
     </select> 
    </script> 
    <script type="text/ng-template" id="Detail"> 
     <select ng-model="selectedItem"> 
     <option ng-repeat="student in Students"> 
      {{student.Id}} - {{student.Name}} -- {{student.Grade}} 
     </option> 
     </select> 
    </script> 
</head> 
    <body> 
     <div ng-controller="TemplateCtrl"> 
      Details Level: <select ng-model="detailLevel" ng-options="c.Id for c in Details"></select> 
      <div ng-include="detailLevel.Id"></div> 
     </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
     <script src="Scripts/TemplateCtrl.js"></script> 
    </body> 
</html> 


です。当初、私は次のよう

<script type="text/ng-template" id="Basic"> 
      {{student.Id}} - {{student.Name}} 
    </script> 
<script type="text/ng-template" id="Detail"> 
      {{student.Id}} - {{student.Name}} -- {{student.Grade}} 
    </script> 


が、私はサイドタグにNGが-含めるやるしようとすると、ブラウザが好きではなかったような何かをしようとしていました。ここでシンプルなものを紛失しているかもしれませんが、ここで重複したコードの匂いを作り出すのは間違っていますか? ありがとう、

答えて

3

テンプレートの代わりにng-switch directiveを試してみることもできます。 続いて、次の作業をする必要があり:

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <title></title> 
</head> 
    <body> 
     <div ng-controller="TemplateCtrl"> 
      Details Level: <select ng-model="detailLevel" ng-options="c.Id for c in Details"></select> 
      <div ng-switch="detailLevel"> 
       <div ng-switch-when="Basic"> 
        <select ng-model="selectedItem"> 
         <option ng-repeat="student in Students">{{student.Id}} - {{student.Name}}</option> 
        </select> 
       </div> 
       <div ng-switch-when="Detail"> 
        <select ng-model="selectedItem"> 
         <option ng-repeat="student in Students">{{student.Id}} - {{student.Name}} -- {{student.Grade}}</option> 
        </select> 
       </div> 
      </div> 
     </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 
     <script src="Scripts/TemplateCtrl.js"></script> 
    </body> 
</html> 
+0

おかげ@Franquis、はいNG-スイッチは動作しますが、それは私が考えていたとして、モジュラーアプローチではありません。 – Nair

+0

私はこれを行うには他の方法はありませんので、私はこれを答えとして受け入れています。 – Nair

関連する問題