Question

我正在寻找使用单选按钮在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>

Answer 1

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

<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/

Answer 2

vm不是父作用域，vm本身是父作用域的子作用域，因此使用范围变量而不是使用ng-model =“vm.isMale”，并为无线电输入标记指定值属性：实施例：

<input type="radio" ng-model="age" value="20">
<input type="radio" ng-model="age" value="30">

那么你可以在switch case中使用$ scope.age，或者使用if ladder来完成你的工作

Answer 3

看看这个

＆＃13;

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 .........");
        }
    }
})

＆＃13;

<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>

＆＃13;

Answer 4

You can use ng-model to store the user's selection。关键是：将两个无线电的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(); } }保持在同一模型中，然后给出不同的值。

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

<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>

和HTML：

appbar_scrolling_view_behavior

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

4 个答案: