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

Question

我试图根据单选按钮选择显示和隐藏值.我在单击单选按钮时执行此操作.它不适合我

这是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;
});

Answer 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;
});

小提琴