使用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元素

回答

相关问题