jest możliwe, aby ng-include inside element opcji?

Próbuję zmienić szablon opcji w locie dla wybranego elementu. Oto, co próbuję zrobić, mam opcję wyboru, która pozwoli użytkownikowi wybrać rodzaj informacji, które chcą zobaczyć przy wyborze ucznia. Jeśli użytkownik wybrał opcję "Podstawowy", wówczas wyświetlam tylko właściwości Id i Nazwa klasy Ucznia. Jeśli użytkownik wybierze opcję "Szczegóły", wówczas wyświetlam: Id, Nazwa i Stopień. Obecna implementacja jestjest możliwe, aby ng-include inside element opcji?

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

Jak widać jestem powielenie kodu zarówno w ng-template „podstawowe” i „Szczegóły”. Początkowo próbowałem coś podobnego następującym

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

ale gdy próbuję zrobić ng obejmują w tagu bocznym przeglądarek nie podoba. Być może brakuje mi czegoś prostego tutaj, co robię źle, aby stworzyć tutaj powielany kod? Dzięki,

Źródło

2013-04-08 Nair

Może możesz spróbować użyć szablonu ng-switch directive, zamiast szablonów. Następnie dodaje powinno działać:

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

Źródło

2013-04-08 13:11:38 Franquis

Dzięki @Franquis, tak ng przełącznik będzie działał, ale nie jest to podejście modułowe jak myślałem. – Nair

Nie przyjmuję tego w żaden inny sposób, więc akceptuję to jako odpowiedź. – Nair

jest możliwe, aby ng-include inside element opcji?

Odpowiedz

Powiązane problemy