2013-04-08 21 views
6


Seçme öğesi için anında şablonun şablonunu değiştirmeye çalışıyorum. İşte yapmaya çalıştığım şey, kullanıcının bir öğrenciyi seçerken görmek istedikleri bilgileri seçmesini sağlayan seçme seçeneğim var. Kullanıcı 'Temel' seçtiyse, Öğrenci sınıfının yalnızca Kimlik ve İsim özelliklerini gösteriyorum. Kullanıcı 'Detay' seçerse o zaman, Kimlik, İsim ve Notu gösteririm. Eğer ben ng-şablonun 'Temel' ve 'Detay' hem de kod çoğaltma am görebileceğiniz gibi şu anki uygulamang-dahil seçenek seçeneğine sahip olmak mümkün mü?

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


olduğunu. Başlangıçta aşağıdaki

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


ama yan etiketinde ng-dahil yapmaya çalıştığınızda, tarayıcılar gibi değildi gibi bir şey çalışıyordu. Burada basit bir şey eksik olabilir, burada yinelenen kod kokusu oluşturmak için yanlış yapıyorum? Teşekkür ederiz,

cevap

3

Belki de şablonlar yerine ng-switch directive kullanmayı deneyebilirsiniz. Sonra şu çalışmalıdır:

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

Teşekkür @Franquis, evet ng anahtarı çalışacak ama düşünüyordum gibi modüler bir yaklaşım değildir. – Nair

+0

Bunu yapmanın başka yolu yok, ben de bunu cevap olarak kabul ediyorum. – Nair

İlgili konular