使用ng-if切換dom元素

我想使用ng-if切換儀表板中的某些dom元素。使用ng-if切換dom元素

我的HTML看起來像：

//按鈕

<div> 
<button ng-click="showDiv('div1');"></button> 
<button ng-click="showDiv('div2');"></button> 
</div>

//內容

<div ng-if="div1" class="div-1"></div> 
<div ng-if="div2" class="div-2"></div>

//在我的控制器：

$scope.div1 = true; 
    $scope.div2= false; 
    $scope.showDiv = function(element){ 
     if($scope.element = 'div2'){ 
     $scope.div2 = true; 
     $scope.div1 = false; 
     } 
     }

其實賦值爲div1和div2 wor k最初，但功能不正常。

我擺弄了一段時間，但我沒有找到解決方案...一些幫助將是偉大的。

感謝，哲羅

來源

2017-07-28 Hucho

沒有'$ scope.element'只是'element' – sTx

您應該使用元素，這是你的參數

$scope.showDiv = function(element){ 
     if(element === 'div2'){ 
     $scope.div2 = true; 
     $scope.div1 = false; 
     } 
}

DEMO

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.div1 = true; 
 
    $scope.div2= false; 
 
    $scope.showDiv = function(element){ 
 
     if(element === 'div2'){ 
 
     $scope.div2 = true; 
 
     $scope.div1 = false; 
 
     } 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script 
 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
 
</script> 
 
<body> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<div> 
 
<button ng-click="showDiv('div1');">DIV1</button> 
 
<button ng-click="showDiv('div2');">DIV2</button> 
 
</div> 
 
<div ng-if="div1" class="div-1">TEST1</div> 
 
<div ng-if="div2" class="div-2">TEST2</div> 
 
</div>

來源

2017-07-28 08:27:49 Sajeetharan

謝謝你的演示。元素的提示非常好，解決了我的一部分問題。然而 - 我不明白的是：如果你點擊div1按鈕，Test1元素不應該改變 - 但是Test2會顯示出來嗎？爲什麼會發生？ – Hucho

，因爲你使div1爲false，div2爲true – Sajeetharan

我不明白。我用「div1」在按鈕「DIV1」中調用showDiv;如果條件不應該在這種情況下作出反應，並改變布爾... – Hucho

我建議你使用納克級和切換值相應

來源

2017-07-28 08:31:12 shikhar

感謝您的建議 - 但與ng級 - 如果我是正確的 - 元素不會被刪除，但onyl隱藏... – Hucho

你可以試試這個

//view 
<button ng-click="toggleCustom()">Custom</button> 
     <span ng-hide="custom">From: 
      <input type="text" id="from" /> 
     </span> 
     <span ng-hide="custom">To: 
      <input type="text" id="to" /> 
     </span> 
     <span ng-show="custom"></span> 

//controller 
$scope.custom = true; 
     $scope.toggleCustom = function() { 
      $scope.custom = $scope.custom === false ? true: false; 
     };

來源

2017-07-28 08:34:07

太好了，但如果我使用ng-hide，我將不得不加載所有元素，雖然我現在不需要它們......也許我會考慮它。 – Hucho

使用ng-if切換dom元素

回答

相關問題