Question

我试图将以下内容转换为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方法对我不起作用。

Answer 1

您需要在两个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){});

角度切换不起作用

1 个答案: