Question

这应该是一个简单的问题。

我在使用带有单选按钮的ng-if时遇到问题。这些是我的按钮：

<label class="radio-inline">
    <input type="radio" id="day_month" ng-model="day_month" name="inlineRadioOptions" value="option1"> day of the
    month
</label>
<label class="radio-inline">
    <input type="radio" id="day_week" ng-model="day_month" name="inlineRadioOptions" value="option2"> day of the
    week
</label>

如果选择了第一个单选按钮，如何使用ng-if来显示内容？

Answer 1

绑定模型day_month将在选择时使用输入的value进行更新。检查值是否等于该值将使您可以检查输入是否已被选中。请参阅下面的示例。

<label class="radio-inline">
    <input type="radio" id="day_month" ng-model="day_month" name="inlineRadioOptions" value="option1"> day of the
    month
</label>
<label class="radio-inline" ng-show="day_month == 'option1'">
    <input type="radio" id="day_week" ng-model="day_month" name="inlineRadioOptions" value="option2"> day of the
    week
</label>

Answer 2

好像你需要根据选择的单选按钮显示和隐藏一些内容。我们可以直接将布尔值绑定到复选框，并且非常容易。如果你想用单选按钮，请找到下面的解决方案。 HTML：

<body ng-app=”app”>
<div ng-controller="PageController">
<label>
    <input type="radio"  ng-model="color.name" value="Red"> Red
</label>
<label>
    <input type="radio"  ng-model="color.name" value="Green"> Green
</label><br>
<div ng-if="color.name==='Red'?true:false">
Hidden Message
</div> 
</body>

Angualr控制器：

var app =angular.module("app",[]);
app.controller("PageController",function($scope){
$scope.color={name:'Green'};

});

工作示例 https://jsfiddle.net/mshyam83/q8vbbd8q/5/

Answer 3

您的模型将使用return属性中的任何值进行更新，因此您可以检查存储在exit()指定的任何变量中的数据：

main()

如何使用ng-if和单选按钮？

3 个答案: