是否可以在選項元素中包含ng-include？

我想改變選擇元素的選項模板。這是我正在嘗試做的，我有選擇選項，這將允許用戶選擇他們想要在選擇學生時看到什麼樣的信息。如果用戶選擇「基本」，那麼我只顯示學生類的ID和名稱屬性。如果用戶選擇「細節」，那麼我會顯示ID，名稱和等級。當前的實現是是否可以在選項元素中包含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>

正如你看到的，我複製的代碼中都NG-模板「基本」和「詳細信息」。起初，我試圖像下面

<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-包括側標籤，瀏覽器不喜歡。我可能會在這裏錯過簡單的東西，我在做什麼錯在這裏創建重複的代碼氣味？謝謝，

來源

2013-04-08 Nair

也許你可以嘗試使用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>

來源

2013-04-08 13:11:38 Franquis

感謝@Franquis，是NG-開關將工作，但它並不像我想的模塊化方法。 – Nair 2013-04-08 15:25:19

我沒有辦法做到這一點，所以我接受這個答案。 – Nair 2013-04-08 18:17:00

是否可以在選項元素中包含ng-include？

回答

相關問題