Elemente mit Wert in angularjs Umfang pro Zeile zählen

Ich habe eine Website, die angle ng-repeat verwendet, um Daten aus meinem Bereich anzuzeigen, und alles funktioniert gut, aber ich muss Elemente zählen, um einen Prozentsatz zu zeigen, abgeschlossen, kann aber nicht scheinen um online eine Lösung zu finden. Ich bin immer noch sehr neu in Angular und JS, also entschuldige mich wenn es eine einfache Lösung ist.Elemente mit Wert in angularjs Umfang pro Zeile zählen

Das ist eine vereinfachte und verallgemeinerte Beispiel dafür, was ich zu erreichen bin auf der Suche nach:

$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'} 
]

Ich möchte einen Prozentsatz der Elemente anzuzeigen, die Zustand ‚OK‘ innerhalb der beiden vorfixiert Artikel: Status_ * und ENG_ *. Dies kann entweder dadurch geschehen, dass man jede Schleife oder besser wiederholt, um das Präfix für die Berechnung über eine Gruppe verwenden zu können.

<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>

Also für Zeile 1, würde StatusPercentComplete 50% und ENGPercentComplete würde 100% betragen.

Jede Richtung würde sehr geschätzt werden.

Quelle

2016-03-22 Andrew

ich mit einer Refactoring Prozent Berechnungsfunktion zusammen ein wenig proof of concept gerade, so dass Sie wieder verwenden können es für entweder Status_x oder ENG_x Schlüssel. Sie können auch einen Prozentsatzfilter für das gebundene HTML-Element verwenden, wenn Sie die number%-Zeichenfolge in der Controller-Funktion nicht erstellen möchten.

Hinweis: Diese Lösung nutzt lodash für die Filterung (die eine Standard-Abhängigkeit in Winkelanwendungen tendiert, aber nur, damit Sie wissen, ...)

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>

Quelle

2016-03-23 02:30:24

Das hat super geklappt in meiner Entwicklungsumgebung, also werde ich es jetzt ausprobieren. Es ist toll, wie dynamisch es ist und wie ich es ändern kann. lodash ist neu für mich und wird es weiter betrachten, da es ein großartiges Werkzeug zu sein scheint. – Andrew

@ bennet-adams Das hat gut funktioniert, aber was ist der Grund dafür, var ctrl = dies zu deklarieren und dann den Controller als Main zu nennen? Es funktioniert gut, aber ich habe Probleme mit anderen Änderungen am Umfang aufgrund der Var, meist wahrscheinlich von meinem Mangel an Verständnis. – Andrew

Es ist eine gute Übung, ["Controller als" -Syntax] (https://toddmotto.com/digging-into-angulars-controller-as-syntax/) zu verwenden, um bereichsspezifische Variablen explizit an einen bestimmten Controller gebunden zu halten, insbesondere für verschachtelte Bereiche. Es ist nicht unbedingt notwendig, und Sie müssen weiterhin $ scope für Beobachter und Ereignis-Listener injizieren, aber es ist der empfohlene Weg für angular^1.2. –

Ich nehme an, du meintest so etwas?

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

Quelle

2016-03-23 00:36:37 Konkko

Danke für die Lösung Ich habe es zur Arbeit gebracht, aber ich habe meine Prozentsätze im laufenden Betrieb nicht aktualisiert, da ich die Formularwerte wie bei der vorherigen Lösung aktualisiert habe. Ich habe nicht an einen Wörterbuchansatz gedacht, also werde ich ihn sicherlich zu meinem Buch mit Werkzeugen hinzufügen :) – Andrew

Elemente mit Wert in angularjs Umfang pro Zeile zählen

Antwort

Verwandte Themen