Angular切换不工作

Angular Toggle not Working

本文关键字：工作 Angular      更新时间：2023-09-26

我试图将以下内容转换为Angular方法，但我被卡住了:

HTML: 

<div id="container" class="container">             
            <embed src="www.example.com/pdf1" width="500" height="500" type='application/pdf' id="myPdf">
            <embed src="www.example.com/pdf2" width="500" height="500" type='application/pdf' id="myPdf2">  
</div>
<div class="container">
    <button class="btn-info" onclick="toggle('myPdf2')" type="button">Toggle PDF</button>
</div>
JavaScript: 

function toggle(target) {
            var curVal = document.getElementById(target).style.visibility;
            document.getElementById(target).style.visibility = (curVal === 'visible') ? 'hidden' : 'visible';
};

基本上它是一个开关，它使一个pdf的出现和消失。

有人建议我采取以下有角度的方法:

 <button ng-click="isShown = isShown ? false : true" type="button">Toggle</button>
              <div id="container" class="container">    
               <embed src="www.example.com/pdf1" width="500" height="500" type='application/pdf' id="myPdf"> 
               <embed ng-show="isShown" src="www.example.com/pdf2" width="500" height="500" type='application/pdf' id="myPdf2"> 
             </div>

由于某些原因，Angular的方法不适合我。

您需要在两个pdf上设置ng-show指令。isShown = isShown?false:true也可简化为isShown = !isShown

试试这个:

<html ng-app>
<body ng-controller="mianController">
    <button ng-click="isShown = !isShown" type="button">Toggle</button>
    <div id="container" class="container">    
        <embed ng-show="!isShown" src="www.example.com/pdf1" width="500" height="500" type='application/pdf' id="myPdf"> 
        <embed ng-show="isShown" src="www.example.com/pdf2" width="500" height="500" type='application/pdf' id="myPdf2"> 
    </div>
<body>
</html>
JavaScript 

angular.module([]).controller('mainController', function($scope){});
相关文章：