Question

我正在使用AngularJS。我有两个输入字段：获得的总标记和标记，以及第三个字段，即百分比。现在输入总标记和标记后，我需要自动计算百分比。

这是我的HTML：

<div class="form-group">
    <label class="control-label">Total Marks</label>
    <input type="text"
           class="form-control input_field"
           name="totalMarks"
           data-ng-model="student.totalMarks" />
</div>
<div class="form-group">
    <label class="control-label">Marks Obtained</label>
    <input type="text"
           class="form-control input_field"
           name="marksObtained"
           data-ng-model="student.marksObtained" />
</div>
<div class="form-group">
    <label class="control-label">Percentage</label>
    <input type="text"
           class="form-control input_field"
           value={{ ((student.marksObtained/student.totalMarks)*100).toFixed(2) }}
           name="rank"
           data-ng-model="student.rank" />
</div>

任何人都可以告诉我如何在输入获得的标记时自动生成具有百分比的排名字段。目前，我正如上所示，但它无法正常工作。

Answer 1

不确定您的百分比计算是否准确，但此Plunkr正在与学生房产的观察者合作。

app.controller('MainCtrl', function($scope){
  $scope.$watchGroup(['student.totalMarks', 'student.marksObtained'], function(){
    if($scope.student.marksObtained !== undefined && $scope.student.totalMarks !== undefined)
      $scope.student.rank = (($scope.student.marksObtained/$scope.student.totalMarks)*100).toFixed(2);
  })
});

https://plnkr.co/edit/NsNge0mzrgjjUgBZ332p?p=preview

Answer 2

您可以尝试内联分配计算，如下所示：

  <input ng-model="student.rank" ng-value="student.rank = ((student.marksObtained/student.totalMarks)*100).toFixed(2)">

Running Example on JsFiddle

Answer 3

它不起作用，因为您的输入链接到ng模型。有两种方法可以解决这个问题：

在student.totalMars和student.marksObtained上设置观察者，并使用新值更新student.rank。
请勿将您的百分比与student.rank相关联，只需按照您的设置值设置。

您可以第二种方式检查here。

Answer 4

在控制器中，添加以下函数和变量：

function getPercentage() {
    // dividing by zero is bad !!!
    let ratio = $scope.student.marksObtained / ($scope.student.totalMarks || 1);
    return (ratio * 100).toFixed(2);
}
$scope.student.percentage = getPercentage();

然后将视图的最后<input />更改为：

<input type="text"
       class="form-control input_field"
       ng-value="student.percentage"
       name="rank" />

如果您希望输入具有双向数据绑定，请使用ng-model代替ng-value。

根据Angularjs中的输入字段计算百分比

4 个答案: