在 angularjs 中显示/隐藏模板 URL

Question

我在控制器中有一个动态数组，其中包含类似于下面的模板（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

Answer 1

这一行：

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