Question

我想使用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的值赋值最初有效，但函数无法正常工作。

我正在摆弄一段时间，但我找不到解决办法......一些帮助会很棒。

谢谢，Hucho

Answer 1

你应该使用element，这是你的参数

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

<强>样本

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>

Answer 2

我建议您使用 ng-class 并相应地切换值

Answer 3

你可以尝试这个

{{1}}

使用ng-if切换dom元素

3 个答案: