の表示/非表示テンプレートURLのangularjs

Question

に私は、テンプレートを選択するドロップダウンを持っている

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

以下に類似したテンプレート（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"> 

PROB。であることを意味し：あなたがにしたい

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

isHiddenの値がfalseの場合にdiv要素を示しています。