AngularJS 中的单选按钮和列表答案

【问题标题】：Radio Button and List in AngularJSAngularJS 中的单选按钮和列表
【发布时间】：2016-02-10 12:15:52
【问题描述】：

我在 AngularJS 中有一个简单的工资计算表。以下是我的html：

<div ng-app="myApp" ng-controller="personCtrl">

Gross: <input type= "text" ng-model="Gross"><br>
<br/>
Deductions:<fieldset>
IT : <input type= "text" size = 12 maxlength = 4 ng-model="IT"><br>
CPP : <input type= "text" ng-model="CPP"><br>
EI : <input type= "text" ng-model="EI"><br>
<br>
</fieldset>


Gender:<fieldset>
<input type="radio" ng-model = "sex"  value = "male"> Male
<br>
<input type="radio" ng-model ="sex" value = "female" > Female
</fieldset>
Dependants:<fieldset>
<select>
<option value="3">3</option>
<option value="4">4</option>
</select>
</fieldset>


<br/>
{{Salary()}}

</div>

-- JavaScript 代码如下：

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.Gross= 0;
$scope.IT = 0;
$scope.CPP = 0;
$scope.EI = 0;
$scope.sex = 
$scope.Salary = function() {

     return ( Number($scope.Gross) - ( Number($scope.Gross) *   (Number($scope.IT)/100 ) +  Number($scope.Gross) *   (Number($scope.CPP)/100   )  + Number($scope.Gross) *  (Number($scope.EI)/100 )) );
 }
 });

我的问题是我可以使用输入框计算扣除额，但是当我选择性别女性，然后 I.Tex 应该减少 2%。同样，如果我在受抚养人中选择 3，那么 ITex 也应该扣除 1%。实际上我无法在计算中实现单选按钮和列表

【问题讨论】：

标签： angularjs radiobuttonlist

【解决方案1】：

在jsfiddle 上查看实时示例。

var myApp = angular.module("myApp", []);


myApp.controller("myCtrl", function($scope) {
  $scope.sex = 1;
  $scope.depends = "3";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  Gender:
  <div>
    <label>
      <input type="radio" name="sex" ng-model="sex" ng-value="0"> Male</label>
    <br>
    <label>
      <input type="radio" name="sex" ng-model="sex" ng-value="1"> Female</label>
    <pre>sex = {{sex}}</pre>
  </div>
  Dependants:
  <fieldset>
    <select ng-model="depends">
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <pre>depends = {{depends}}</pre>
  </fieldset>
</body>

【讨论】：

【解决方案2】：

你可以试试下面的方法。

myApp.controller('personCtrl', function($scope) {
$scope.Gross= 0;
$scope.IT = 0;
$scope.CPP = 0;
$scope.EI = 0;
$scope.sex = 'female';
$scope.dependents = '3';
$scope.Salary = function() {


     var result =  Number($scope.Gross) - 
        ( 
                Number($scope.Gross) *   (Number($scope.IT)/100 ) +  
                Number($scope.Gross) *   (Number($scope.CPP)/100) + 
                Number($scope.Gross) *   (Number($scope.EI)/100 )
        );

     if($scope.sex == 'female')
     {
        result = result - (2*result/100);
     }

     if($scope.dependents==3)
     {
        result = result - (1*result/100);
     }
     return result
 }
 });

【讨论】：