2017-05-27 3 views
0

AngularJSコード使用NGリピートが{{x.nameは}}マークを更新する必要

これは私が修正したいAngularJSで私のコードです。現在、テーブルの最後の行には、生徒の名前とマークが印刷されています。ユーザーがあらかじめプログラムされたマークを編集した場合、名前とスコアを変更します。

例:最高は、これは私は変更が発生するコードである0

<script> 

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) 
{ 
    {  
     var x=[]; 
     for (var i = 0; i<20; i++) 
     { 
      var R = Math.round((Math.random() * 10) * 10); 
      x[i]=R; 
     } 
    }; 

$scope.names = [ 
    {name:'Priya',age:'19',gender:'Female',English:x[0], Hindi:x[1]}, 
    .... 
    {name:'Jiah', age:'18', gender:'Female',English:x[18],Hindi:x[19]} 
    ]; 

$scope.sortColumn ="name"; 

$scope.avg = function(e, h){ 
if(!h) h=0; 
if(!e) e=0; 
return (parseInt(h)+parseInt(e))/2; 
} 

$scope.delete = function (name) 

{ 
    $scope.names.splice($scope.names.indexOf(name), 1); 
} 

}); 
</script> 

HTMLコード に変更された場合に第二の最高の人が最も高くなります。 HTMLコードの一番下には、ヒンディー語と英語の最高点をどこに表示したいのかがわかります。

<table> 


    <tr ng-repeat ="x in names | orderBy:sortColumn"> 
     <td>{{x.name}}</td> 
     <td>{{x.age}}</td> 
     <td>{{x.gender}}</td> 
     <td><input type="text" ng-model="x.English"></td> 
     <td><input type="text" ng-model="x.Hindi"></td> 
     <td> 
      <button><a href="" ng-click="delete(x)" style="text-decoration:none;">Delete</a></button> 
     </td> 
    </tr> 
</table> 

<table ng-model="total"> 
    <tr><td>The total is: {{total}}</td></tr> 

ここで私は英語で最高のマークを表示し、ヒンディー語を表示したいと思っています。

<tr><td ng-repeat="x in names |orderBy:'-English' | limitTo:1"> {{x.name}} has the highest marks in English: {{x.English}}</td></tr> 
    <tr><td ng-repeat="x in names |orderBy:'-Hindi' | limitTo:1"> {{x.name}} has the highest marks in Hindi: {{x.Hindi}}</td></tr> 
</table> 

答えて

0

入力を更新すると、モデルが「番号」ではなく「文字列」に設定されるという問題があると思います。

"text"から "number"に変更する必要があります。また

<td><input type="number" ng-model="x.English"></td> 
<td><input type="number" ng-model="x.Hindi"></td> 

が適切に空の値を発注する:

<tr><td ng-repeat="x in names | orderBy:['!-English', '-English'] | limitTo:1"> {{x.name}} has the highest marks in English: {{x.English}}</td></tr> 
<tr><td ng-repeat="x in names | orderBy:['!-Hindi', '-Hindi'] | limitTo:1"> {{x.name}} has the highest marks in Hindi: {{x.Hindi}}</td></tr> 

の作業jsfiddle:

http://jsfiddle.net/fk5zjuq8/

0

をむしろngRepeatを使用するよりも、あなたが学生を返します別の関数を作成することができます特定の科目における最高値:

$scope.highestStudent = function(key) { 
    return $scope.names.reduce(function(prev, curr) { 
     return prev[key] > curr[key] ? prev : curr; 
    }); 
} 

Reduceを使用すると、Arrayを1つの結果に縮小します。これらの生徒のうち、特定の科目で最も高い値を持つものがあります。

<tr><td> {{highestStudent('English').name}} has the highest marks in English: {{highestStudent('English').English}}</td></tr> 
<tr><td> {{highestStudent('Hindi').name}} has the highest marks in Hindi: {{highestStudent('Hindi').Hindi}}</td></tr> 
:これにより

、我々は結果を表示するには、代わりにこれを使用することができます