1行あたりのanglejsスコープの値を持つアイテムをカウントする

角度ng-repeatを使用してスコープのデータを表示するサイトがありますが、すべて正常に動作しますが、パーセンテージを表示するにはアイテム数をカウントする必要がありますオンラインでソリューションを見つけることができます。私はAngularとJSにはまだまだ新しいので、簡単な解決策であれば謝ります。1行あたりのanglejsスコープの値を持つアイテムをカウントする

以下、私が達成するために探しています何の簡略化と一般化した例である：

$scope.devices = [ 
{Detail_A:'ShowA1',Detail_B:'ShowB1',Status_A:'',Status_B:'OK',Status_C:'',Status_D:'OK',ENG_A:'OK',ENG_B:'OK',ENG_C:'OK'}, 
{Detail_A:'ShowA2',Detail_B:'ShowB2',Status_A:'OK',Status_B:'OK',Status_C:'OK',Status_D:'OK',ENG_A:'',ENG_B:'',ENG_C:''}, 
{Detail_A:'ShowA3',Detail_B:'ShowB3',Status_A:'OK',Status_B:'OK',Status_C:'OK',Status_D:'OK',ENG_A:'OK',ENG_B:'OK',ENG_C:'OK'} 
]

私は2つ前の固定項目内の「OK」状態の項目の割合を表示したいと思います：STATUS_ *とENG_ *。これは、グループごとに計算するためにプレフィックスを使用できるようにするために、それぞれをループするか、またはよりよくループする必要があります。

<div ng-repeat="device in devices"> 
<div class="col-md-2">{{StatusPercentComplete}}</div> 
<div class="col-md-1">{{ENGPercentComplete}}</div> 
<div class="col-md-1">{{device.Detail_A}}</div> 
<div class="col-md-1">{{device.Detail_B}}</div> 
</div>

したがって、行1の場合、StatusPercentCompleteは50％になり、ENGPercentCompleteは100％になります。

いずれの方向も高く評価されます。

出典

2016-03-22 Andrew

私は、リファクタリングパーセント演算機能と一緒にコンセプトの少し証拠を置きますStatus_xまたはENG_xキーです。コントローラー関数にnumber%文字列を作成したくない場合は、バインドされたhtml要素に対してパーセントフィルターを使用することもできます。

注：このソリューションは、フィルタリングにlodashを使用しています（角のアプリケーションで標準依存する傾向がある、しかし、あなたが知っているだけのよう...）ソリューションの

angular.module('app', []) 
 
    .controller('MainCtrl', function() { 
 
    var ctrl = this; 
 
    
 
    ctrl.devices = [ 
 
     {Detail_A:'ShowA1',Detail_B:'ShowB1',Status_A:'',Status_B:'OK',Status_C:'',Status_D:'OK',ENG_A:'OK',ENG_B:'OK',ENG_C:'OK'}, 
 
     {Detail_A:'ShowA2',Detail_B:'ShowB2',Status_A:'OK',Status_B:'OK',Status_C:'OK',Status_D:'OK',ENG_A:'',ENG_B:'',ENG_C:''}, 
 
     {Detail_A:'ShowA3',Detail_B:'ShowB3',Status_A:'OK',Status_B:'OK',Status_C:'OK',Status_D:'OK',ENG_A:'OK',ENG_B:'OK',ENG_C:'OK'} 
 
    ]; 
 
    
 
    ctrl.percentComplete = function(keyString, item) { 
 
     var statuses = _.filter(_.keys(item), function(key) { 
 
     return key.substring(0, keyString.length) === keyString; 
 
     }); 
 
     var okStatuses = _.filter(statuses, function(status) { 
 
     return item[status] === 'OK'; 
 
     }); 
 
     
 
     return okStatuses.length/statuses.length * 100 + '%'; 
 
    }; 
 

 
    });

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
    <script data-require="[email protected]" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl as main"> 
 
    <div ng-repeat="device in main.devices" class="row"> 
 
     <div class="col-md-2 col-sm-2 col-xs-2">{{main.percentComplete('Status', device)}}</div> 
 
     <div class="col-md-1 col-sm-1 col-xs-2">{{main.percentComplete('ENG', device)}}</div> 
 
     <div class="col-md-1 col-sm-1 col-xs-2">{{device.Detail_A}}</div> 
 
     <div class="col-md-1 col-sm-1 col-xs-2">{{device.Detail_B}}</div> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2016-03-23 02:30:24

これは私の開発環境に大きな感謝をもたらしました。どのようにダイナミックで、私のニーズに簡単に変えられるかは素晴らしいです。ロダッシュは私には新しいものなので、素晴らしいツールになるためのルックスとしてそれをさらに見ていきます。 – Andrew

@ bennet-adamsこれはうまくいっていますが、var ctrl = thisを宣言してから、コントローラをMainとして呼び出す理由は何ですか？それは素晴らしいですが、私はvarのためにスコープの他の変更を行うのに苦労します、ほとんど私の理解の不足からそうです。 – Andrew

スコープされた変数を特定のコントローラに明示的に結びつけるためには、特に "入れ子"のために["controller as"構文]（https://toddmotto.com/digging-into-angulars-controller-as-syntax/）を使用することをお勧めしますスコープ厳密には必要ではありませんが、ウォッチャーとイベントリスナーに$ scopeを注入する必要がありますが、これは角度^ 1.2の推奨方法です。 –

このような意味があると思いますか？

HTML：

<div ng-repeat="(key,val) in devices" ng-init="calculateValues(key, val)"> 
    <div class="col-md-2">{{foo[key].StatusPercentComplete/foo[key].StatusSize * 100}} %</div> 
    <div class="col-md-1">{{foo[key].ENGPercentComplete/foo[key].ENGSize * 100}} %</div> 
    <div class="col-md-1">{{val.Detail_A}}</div> 
    <div class="col-md-1">{{val.Detail_B}}</div> 
</div>

JS：

$scope.foo = []; 

$scope.calculateValues = function(key, value){ 
    $scope.foo[key] = { 
    StatusPercentComplete: 0, 
    StatusSize: 0, 
    ENGPercentComplete: 0, 
    ENGSize: 0 
    }; 
    for(var property in value){ 
    if(property.indexOf("ENG_") == 0){ 
     $scope.foo[key].ENGPercentComplete += (value[property] == "OK" ? 1 : 0); 
     $scope.foo[key].ENGSize++; 
    } 
    if(property.indexOf("Status_") == 0){ 
     $scope.foo[key].StatusPercentComplete += (value[property] == "OK" ? 1 : 0); 
     $scope.foo[key].StatusSize++; 
    } 
    } 
}

Plunker：あなたが再利用できるようにhttps://plnkr.co/edit/LjvwhdMvKl9Ntk3q9pbA?p=preview

出典

2016-03-23 00:36:37 Konkko

感謝以前のソリューションのようにフォームの値を更新したときに、そのパーセンテージを更新するようには見えませんでした。私は辞書のアプローチを考えなかったので、確かにそれをツールの本に追加します:) – Andrew

1行あたりのanglejsスコープの値を持つアイテムをカウントする

答えて

関連する問題