Javascript 使用ng if切换dom元素

我想使用ng if在仪表板中切换一些dom元素

我的html看起来像：

//钮扣

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

实际上，div1和div2的值赋值最初是有效的，但是函数不能正常工作

我正在闲逛一段时间，但我没有找到解决办法…一些帮助将是伟大的

---

谢谢，Hucho

您应该使用元素，它是您的参数

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

演示

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.div1=true；
$scope.div2=false；
$scope.showDiv=函数（元素）{
如果（元素=='div2'）{
$scope.div2=true；
$scope.div1=false；
}
}
});

第一组
第二组
测试1
测试2
您应该使用元素，它是您的参数

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

演示


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.div1=true；
$scope.div2=false；
$scope.showDiv=函数（元素）{
如果（元素=='div2'）{
$scope.div2=true；
$scope.div1=false；
}
}
});

第一组
第二组
测试1
测试2
我建议您使用ng类并相应地切换值
我建议您使用ng类并相应地切换值
您可以试试这个

//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;
        };

//查看
习俗
发件人：
致：
//控制器
$scope.custom=true；
$scope.toggleCustom=function（）{
$scope.custom=$scope.custom==false？true:false；
};
你可以试试这个

//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;
        };

//查看
习俗
发件人：
致：
//控制器
$scope.custom=true；
$scope.toggleCustom=function（）{
$scope.custom=$scope.custom==false？true:false；
};
没有
$scope.element
只是
元素
没有
$scope.element
只是
元素
谢谢您的演示。元素的提示非常好，解决了我的部分问题。然而，我不明白的是：如果您单击div1按钮，Test1元素不应该改变，但是显示的是acutally Test2？为什么会发生这种情况？因为你把div1变为false，div2变为true，我不明白。我把showdivin按钮称为“DIV1”和“DIV1”；在这种情况下，if条件不应作出反应并更改bools…还有一个问题：我不想调用用“div1”硬编码的showDiv（）。是否可以通过角度表达式获取元素的id或内容，并用它调用我的函数？谢谢您的演示。元素的提示非常好，解决了我的部分问题。然而，我不明白的是：如果您单击div1按钮，Test1元素不应该改变，但是显示的是acutally Test2？为什么会发生这种情况？因为你把div1变为false，div2变为true，我不明白。我把showdivin按钮称为“DIV1”和“DIV1”；在这种情况下，if条件不应作出反应并更改bools…还有一个问题：我不想调用用“div1”硬编码的showDiv（）。有没有可能通过一个角度表达式获取元素的id或内容并调用我的函数？谢谢你的建议-但是使用ng类-如果我是对的话-元素没有被删除，但是onyl隐藏了…谢谢你的建议-但是使用ng类-如果我是对的-元素没有被删除，但是onyl隐藏了…这也是一个很好的建议，但是如果我使用ng hide，我将不得不加载所有元素，尽管我现在不需要它们…也许我考虑过了。这也是一个很好的建议，但是如果我使用ng hide，我将不得不加载所有元素，尽管我现在不需要它们…也许我考虑过了。