根據Angularjs中的輸入字段計算百分比

我正在使用AngularJS。我有兩個輸入字段：獲得的總標記和標記，以及第三個字段是百分比。現在輸入總分數和分數後，我需要自動計算百分比。根據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>

誰能告訴我如何自動儘快產生與百分比排位字段我輸入獲得的標記。目前，我按照上面所示的方式進行操作，但不起作用。

來源

2017-09-26 Sachin HR

與NG-值 – Zooly

我試過，但沒有工作的嘗試。 –

爲什麼你不只是把你的student.totalMarks和student.marks得到你的控制器和學生標誌的觀察，並在更改只是做計算 - 在student.rank，並保持字段 – pegla

不確定您的百分比計算是準確的，但此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

來源

2017-09-26 10:28:12 Zooly

謝謝。它爲我做了詭計 –

很高興幫助你！ :) – Zooly

它不起作用，因爲您的輸入已鏈接到ng模型。有兩種方法來解決這個問題：

設置上student.totalMars和student.marksObtained一個觀察者，並用新的值更新student.rank。
請勿將您的百分比與student.rank關聯，只需按照您的設置值。

您可以檢查第二種方式的here。

來源

2017-09-26 10:24:29 senerh

它的工作，但你可以告訴如何獲得這個值ng模型，以便我可以傳遞它與學生對象保存？ –

在你的控制器中添加下列函數和變量：

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。

來源

2017-09-26 10:24:58

您可以嘗試分配你的計算內聯，就像這樣：

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

Running Example on JsFiddle

來源

2017-09-26 10:40:43 1337

根據Angularjs中的輸入字段計算百分比

回答

相關問題