在AngularJS中将单选按钮绑定到if语句

Binding Radio buttons to if statements in AngularJS

本文关键字：if 语句 绑定 单选按钮 AngularJS      更新时间：2023-09-26

我正在寻找使用单选按钮在if语句之间交换的最佳方法。我正在我的控制器中做一个计算，它使用单选按钮来确定要做哪个计算，所以如果你选择Radio1，它将做Calc1，如果你选择Radio2，它将做Calc2。但是，您必须能够在Calc1和Calc2之间进行交换，而不是每次刷新页面时限制在一个或另一个。

这是我正在寻找的一个例子，使用我当前的控制器。注意我的公司没有直接使用$Scope，我们使用vm。这对我们来说相当于$Scope。

if (vm.isFemale) {
            return Math.round((66 + (6.23 * vm.weight) + (12.7 * ((vm.feet * 12) + vm.inches)) - (6.8 * vm.age)) * vm.dropdown);
        }
        if (vm.isMale) {
            return Math.round((655 + (4.35 * vm.weight) + (4.7 * ((vm.feet * 12) + vm.inches)) - (4.7 * vm.age))) * vm.dropdown;
        }
        if (output == null || output == "NaN")
            return;
    }

我是AngularJS的新手，我查看了API和一些表单，但我找不到任何对我当前情况有用的东西，如果我忽略了一些东西，请指出我正确的方向。

编辑

这是我在HTML页面中定义单选按钮的方式:

                    <label for="sex">Sex: </label>
                <label>
                    <input type="radio" ng-model="vm.isMale" />Male
                    <input type="radio" ng-model="vm.isFemale" />Female
                </label>

您必须为每个单选按钮添加一个value属性，并为整个组设置相同的模型变量。

<input type="radio" ng-model="gender" value="female" ng-change="calc=calcFemale">
<input type="radio" ng-model="gender" value="male" ng-change="calc=calcMale">

另外，这里有一个使用ng-model和ng-change来交换计算函数的例子:http://jsfiddle.net/mrc1800k/1/

vm不是父作用域，vm本身是父作用域的子作用域，所以与其使用ng-model="vm.>使用一个作用域变量，并为你的无线电输入标签指定一个value属性:例子:

<input type="radio" ng-model="age" value="20">
<input type="radio" ng-model="age" value="30">
然后可以使用$scope。

您可以使用ng-model来存储用户的选择。关键是:保持两个无线电的ng-model为同一型号，然后给出不同的值。

根据模型值，选择正确的函数进行计算。例如http://jsfiddle.net/mrc1800k/2/:

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.gender = 'male';
    function calcByMale () {
        console.log('calcByMale');
    }
    function calcByFemale () {
        console.log('calcByFemale');
    }
    $scope.calc = function () {
        ($scope.gender === 'female') ? calcByFemale() : calcByMale();
    }
}
HTML:

和

<div ng-controller="MyCtrl">
<input type="radio" ng-model="gender" value="female">
<input type="radio" ng-model="gender" value="male"> 
<button ng-click="calc()">Calculate</button>
<hr> 
{{gender}}
</div>

看看这个

var exampleApp = angular.module('exampleApp', [])
exampleApp.controller('testCtrl', function ($scope) {
    $scope.Gender = 'default value'
    $scope.change = function () {
        if ($scope.Gender == 'male') {
            console.log('Execute male context here .........')
        } else {
            console.log("execute female context here .........");
        }
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
    <div ng-app="exampleApp">
        <div ng-controller="testCtrl">
            <label for="sex">
                Sex: </label>
            <label>
                <input type="radio" ng-model="Gender" value="male" ng-change="change()">Male
                <input type="radio" ng-model="Gender" value="female" ng-change="change()">Female
            </label>
            <div ng-switch="Gender">
                <div ng-switch-when="male">
                    <h4>Male is selected you can do what you need</h4>
                </div>
                <div ng-switch-when="female">
                    <h4>female is selected and you can do what you need</h4>
                </div>
            </div>
        </div>
    </div>
</body>

相关文章：