Angularjs基于单选按钮选择显示和隐藏结果
我试图根据单选按钮选择显示和隐藏一个值。我是在点击单选按钮时做这件事的。这对我不起作用 下面是HTML和js代码Angularjs基于单选按钮选择显示和隐藏结果,angularjs,angularjs-ng-click,Angularjs,Angularjs Ng Click,我试图根据单选按钮选择显示和隐藏一个值。我是在点击单选按钮时做这件事的。这对我不起作用 下面是HTML和js代码 **HTML Code:** <div ng-app="ssbApp" ng-controller="ssbCtrl"> <input type="radio" name="showHideExample" ng-model="showHideExample" value="single" ng-click="showHideTest=true">Sh
**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;
});
**HTML代码:**
显示
隐藏
测试隐藏和显示
**角JS代码:**
var ssbApp=angular.module(“ssbApp”,[]);
ssbApp.controller('ssbCtrl',函数($scope,$http){
$scope.showHideTest=false;
});
显示
隐藏
测试隐藏和显示
**角JS代码:**
var ssbApp=angular.module(“ssbApp”,[]);
ssbApp.controller('ssbCtrl',函数($scope,$http){
$scope.showHideTest=false;
$scope.showHide=函数(参数){
$scope.showHideTest=param;
}
});
显示
隐藏
测试隐藏和显示
**角JS代码:**
var ssbApp=angular.module(“ssbApp”,[]);
ssbApp.controller('ssbCtrl',函数($scope,$http){
$scope.showHideTest=false;
$scope.showHide=函数(参数){
$scope.showHideTest=param;
}
});
您的代码不起作用的原因是输入错误-ng snow
而不是ng show
您还可以通过将单选按钮绑定到布尔模型(使用ng model
),并使用此变量直接控制div的可见性(使用ng show
)。然后您不需要任何ng单击
HTML:
您的代码不起作用的原因是输入错误-ng snow
而不是ng show
您还可以通过将单选按钮绑定到布尔模型(使用ng model
),并使用此变量直接控制div的可见性(使用ng show
)。然后您不需要任何ng单击
HTML:
一个简单的答案,甚至不用js
一个不使用js的简单答案
HTML代码:
试试这个例子,它会起作用的
HTML代码:
试试这个例子,它会起作用的
简单而快速的解决方案是设置初始值
<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>
val 1
val 2
第一台点击
第二台点击
简单快速的解决方案,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>
val 1
val 2
第一台点击
第二台点击
这是我正在编写的代码的一部分。除了单选按钮,我还有一些下拉列表。在更改下拉列表时,我必须获得结果并将其显示在showHideTest区域。现在,当用户单击显示/隐藏单选按钮时,我必须重置结果。因此,我必须使用ng Click,当你纠正ng snow->ng show时,它工作正常吗?天哪!!!那是我犯的愚蠢的错误。现在它开始工作了。非常感谢您更正它。@SriAlluri-为什么不选择sheilak作为答案。这是我正在编写的代码的一部分。除了单选按钮,我还有一些下拉列表。在更改下拉列表时,我必须获得结果并将其显示在showHideTest区域。现在,当用户单击显示/隐藏单选按钮时,我必须重置结果。因此,我必须使用ng Click,当你纠正ng snow->ng show时,它工作正常吗?天哪!!!那是我犯的愚蠢的错误。现在它开始工作了。非常感谢你纠正它。@SriAlluri-你为什么不选择sheilak作为答案呢。
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
$scope.showHideTest = false;
});
<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>
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;
}
<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>
var ssbApp = angular.module("ssbApp", []);
ssbApp.controller('ssbCtrl', function ($scope, $http) {
// $scope.showHideTest = false;
});
<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>