Angularjs根据单选按钮选择显示和隐藏结果答案

【问题标题】：Angularjs show and hide result based on radio button selectionAngularjs根据单选按钮选择显示和隐藏结果
【发布时间】：2018-08-11 22:15:09
【问题描述】：

我正在尝试根据单选按钮选择显示和隐藏一个值。我在单选按钮的 ng-click 上执行此操作。它不适合我

这里是 HTML 和 Angular js 代码

**HTML Code:**
<div ng-app="ssbApp" ng-controller="ssbCtrl">
    <input type="radio" name="showHideExample" ng-model="showHideExample" value="single" ng-click="showHideTest=true">Show
    <input type="radio" name="showHideExample" ng-model="showHideExample" value="multi" ng-click="showHideTest=false">hide
    <div ng-snow="showHideTest" ng-model="showHideTest">Test hide and show</div>
</div>

**Angular JS Code:**
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
   $scope.showHideTest = false;
});

【问题讨论】：

标签： angularjs angularjs-ng-click

【解决方案1】：

您的代码不起作用的原因是有一个拼写错误 - ng-snow 而不是 ng-show。

您也可以通过将单选按钮绑定到布尔模型（使用ng-model）来做到这一点，并使用此变量直接控制 div 的可见性（使用ng-show）。那你就不需要ng-click

HTML：

<div ng-app="ssbApp" ng-controller="ssbCtrl">
    <input type="radio" name="showHideExample" ng-model="showHideTest" ng-value="true">Show
    <input type="radio" name="showHideExample" ng-model="showHideTest" ng-value="false">hide
    <div ng-show="showHideTest">Test hide and show</div>
</div>

JS：

var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
    $scope.showHideTest = false;
});

Fiddle

【讨论】：

这是我正在处理的代码的一部分。除了单选按钮，我还有一些下拉菜单。在更改下拉列表时，我必须获取结果并将其显示在 showHideTest 区域中。现在，当用户单击显示/隐藏单选按钮时，我必须重置结果。所以为此我必须使用 ng-click
你改正ng-snow -> ng-show 是否正常？
天啊！！！那是我犯的愚蠢错误。现在它的工作。非常感谢您的纠正。
@SriAlluri - 你为什么不选择 sheilak 作为答案。

【解决方案2】：

一个简单的答案，甚至不用 js..https://codepen.io/SusanneLundblad/pen/iBhoJ

<div ng-app="">
 <div class="wrap">
  <h1>Hello there!</h1>
   <p>Push the radio buttons to change the content!</p>
   <form> 
    <label for="first">Show first content</label>
     <input id="first" type="radio" name="content" ng-model="content" value="first">
  <br />
   <label for="other">Show other content</label>
     <input id="other" type="radio" name="content" ng-model="content" value="other">
   </form>

  <div class="wrapper">
   <p ng-show="content == 'first'">This is the first content!</p>
   <h2 ng-show="content == 'other'">This is the other content!</h2>
  </div>
 </div>
</div>

CSS：（只是为了清楚我使用）

html, body {
background-color: #ecf0f1;
margin: 20px auto;
display: block;
max-width: 600px;
height: 100%;
}

body {
padding: 20px;
position: relative;
} 

label,h1,p,h2 {
font-family: "Helvetica Neue", sans-serif;
font-weight: 300;
}

h1 {
margin-bottom: 1.5em;
color: #3498db;
}

h2 {
color: #2980b9;
margin-bottom: 9px;
margin-top: 0;
font-size: 20px;
background-color: white;  
text-align: center;
padding: 16px;
z-index: 15;
border-radius: 4px;

transition: all 2s ease-out;
}

.wrap {
width: 320px;
margin: 0 auto;
display: block;
}

label {
display: inline-block;
width: 180px;
line-height: 2
}

form {
margin-bottom: 2em;
}


.wrapper {
border: 1px dashed #95a5a6;
height: 56px;
margin-top: 16px;
border-radius: 4px;
position: relative;
font-size: 12px;
}

.wrapper p {
line-height: 31px;
text-align: center;
}

【讨论】：

【解决方案3】：

<div ng-app="ssbApp" ng-controller="ssbCtrl">
    <input type="radio" name="showHideExample" ng-model="showHideExample" value="single" ng-click="showHide(true)">Show
    <input type="radio" name="showHideExample" ng-model="showHideExample" value="multi" ng-click="showHide(false)">hide
    <div ng-snow="showHideTest" ng-model="showHideTest">Test hide and show</div>
</div>

**Angular JS Code:**
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
   $scope.showHideTest = false;

   $scope.showHide = function(param){
 $scope.showHideTest = param;
}
});

【讨论】：

【解决方案4】：

简单快速的解决方案，ng-init="yourmodel='val1'"就是设置初始值

<input type="radio" name="name"  ng-click="yourmodel='val1'"
       ng-checked="yourmodel=='val1'" ng-model="yourmodel"
       ng-init="yourmodel='val1'" > val 1
<input type="radio" name="name"  ng-click="yourmodel='val2'"
       ng-checked="yourmodel=='val2'" ng-model="yourmodel" > val 2

<div  ng-if="yourmodel=='val1'">  Radio 1 clicked </div>
<div  ng-if="yourmodel=='val2'">  Radio 2 clicked </div>

【讨论】：

【解决方案5】：

HTML代码代码：

试试这个例子，它会起作用的。

<div ng-app="ssbApp" ng-controller="ssbCtrl">
    <input type="radio" name="showHideExample" ng-model="showHideExample"   ng-value="true">Show
    <input type="radio" name="showHideExample" ng-model="showHideExample" ng-value="">hide
    <div ng-snow="(showHideExample ==true)?true:false">Test hide and show</div>
</div>

Angular JS 代码：

var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
  // $scope.showHideTest = false;
});

【讨论】：