javascript - 在angularjs中显示/隐藏模板URL

我在Controller中有一个动态数组，其中包含类似于以下内容的模板（html文件）

 $scope.templates =
      [ { name: 'template1.html', url: 'template1.html'},
        { name: 'template2.html', url: 'template2.html'} ];

我有一个下拉菜单来选择模板。
我在html中使用ng-include来获取这些文件。
问题是：
加载template1.html然后切换到template2.html后，我想隐藏template1.html数据并显示template2.html。
下次，当我选择template1.html时，我想隐藏template2.html数据并显示template1.html数据，而不是再次加载template1.html。

我在下面尝试过：
的HTML：

<div ng-controller="ExampleController">
  <select ng-model="template" ng-options="t.name for t in templates">
   <option value="">(blank)</option>
  </select>
  url of the template: <code>{{template.url}}</code>
  <hr/>
  <div class="slide-animate-container" ng-show="template.isHidden">
    <div  class="slide-animate" ng-include="template.url"></div>
  </div>
  <div class="slide-animate-container" ng-hide="template.isHidden">
    <div  class="slide-animate"></div>
  </div>
</div>

app.controller('ExampleController', ['$scope', function($scope) {
    $scope.templates =
      [ { name: 'template1.html', url: 'template1.html'},
        { name: 'template2.html', url: 'template2.html'} ];
    $scope.template = $scope.templates[0];
    $scope.$watch('template',function(newValue, oldValue) {
      $scope.templates[0].isHidden = true;//will do _.each to update
      $scope.templates[1].isHidden = true;
      var xyz = $scope.template;
      xyz.isHidden = false;
    });
  }]);

template1.html，template2.html可以是普通的html文件。

请提出建议。

https://plnkr.co/edit/TJKYbDrp1C1g4fQNHCi2?p=preview

最佳答案

这行：

<div class="slide-animate-container" ng-show="template.isHidden">

概率。原意是要：

<div class="slide-animate-container" ng-include="template.url" ng-show="!template.isHidden">

如果isHidden的值为false，则要显示div。