在同一 page/tab 中显示 2 个模板

Question

我对 ng-template 有疑问。正在观看 this example，如果我在下拉菜单中添加另一个选项（例如 template3.html），我该如何同时显示第一个和第二个模板？

HTML:

  <!-- template1.html -->
  <script type="text/ng-template" id="template1.html">
    Content of template1.html
  </script>

  <!-- template2.html -->
  <script type="text/ng-template" id="template2.html">
    Content of template2.html
  </script>


  <div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates">
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include src="template.url"></div>
  </div>

JS:

function Ctrl($scope) {
  $scope.templates =
    [ { name: 'template1.html', url: 'template1.html'}
    , { name: 'template2.html', url: 'template2.html'}
    , { name: 'template3.html', url: }//this must contain first and second template
    ];
  $scope.template = $scope.templates[0];
}

Answer 1

创建一个包含其他两个的模板

  <script type="text/ng-template" id="template3.html">
     <div ng-include src="'template1.html'"></div>
     <div ng-include src="'template2.html'"></div>
  </script>

JS

function Ctrl($scope) {
  $scope.templates =
    [ { name: 'template1.html', url: 'template1.html'}
    , { name: 'template2.html', url: 'template2.html'}
    , { name: 'template3.html', url: 'template3.html' }
    ];
  $scope.template = $scope.templates[0];
}

DEMO

在同一 page/tab 中显示 2 个模板

Show 2 template in the same page/tab

html

javascript

angularjs

angularjs-ng-template