单击切换后如何更改按钮值是 angularJs 中切换列表上的单击值？答案

【问题标题】：after clicking on toggle how to change button value is click value on toggle list in angularJs?单击切换后如何更改按钮值是 angularJs 中切换列表上的单击值？
【发布时间】：2018-08-03 06:07:53
【问题描述】：

单击切换后如何更改按钮值是 angularJs 中切换列表上的单击值？

我已经写了这段代码，请帮帮我？我还解释了代码是如何工作的，只有在单击切换后我才需要如何更改按钮值是单击 angularJs 中切换列表上的值。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
     min-width: 162px;
     position:reletive;
font-weight:bold;
}

.dropbtn:after{
    content: '';
    border-top: 8px solid white;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    left: 75px;
    position: absolute;
    top: 37px;

}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    border:1px solid  #3498DB;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     border-top:2px solid  #3498DB;
}



.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>

编写html代码

<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="myFunction()" id="test" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
   window.onclick = function(event) {
   if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

【问题讨论】：

标签： javascript arrays angularjs

【解决方案1】：

在 javascript 中获得选定值后，使用以下代码将其分配给按钮值：

document.getElementById("button_Name").innerHTML = selectedValueFromDropdown;

【讨论】：

【解决方案2】：

在你的 window.onclick 函数中，你可以添加这个修复：

if (!event.target.matches('.dropbtn a')) {
    document.getElementById("test").innerHTML = event.target.innerHTML;
}

因此，如果您单击“选项”按钮之一，下拉按钮的 innerHTML（文本）将采用该选项之一。

完整代码（或CodePen.io：

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
   window.onclick = function(event) {
   if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
     if (!event.target.matches('.dropbtn a')) {
       document.getElementById("test").innerHTML = event.target.innerHTML;
     }
  }
}

.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
     min-width: 162px;
     position:reletive;
font-weight:bold;
}

.dropbtn:after{
    content: '';
    border-top: 8px solid white;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    left: 75px;
    position: absolute;
    top: 37px;

}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    border:1px solid  #3498DB;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     border-top:2px solid  #3498DB;
}



.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="myFunction()" id="test" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>


</body>
</html>

顺便说一句，在您的代码中，您不使用 AngularJS :)

【讨论】：