Question

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

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。

在angularjs中显示/隐藏模板URL

1 个答案: