Satır başına angularjs kapsamındaki öğeleri sayın

Verilerimi kapsamımdan ve tüm çalışmalardan göstermek için açısal ng-yineleme kullanan bir sitem var, ancak tamamlanmış bir yüzdeyi göstermek için öğeleri saymam gerekiyor, ancak görünmüyor olabilir çevrimiçi bir çözüm bulmak için. Ben Angular ve JS için hala çok yeni, bu yüzden eğer kolay bir çözüm varsa özür dilerim.Satır başına angularjs kapsamındaki öğeleri sayın

aşağıdaki I elde etmek ne arıyorum basitleştirilmiş ve yaygın örneğidir:

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

O devlet 'Tamam' iki ön sabit kalemlerin içindeki öğelerin bir yüzdesini göstermek istiyorum: status_ * ve ENG_ *. Bu, bir grup üzerinde hesaplamak için öneki kullanabilmek için her birini veya daha iyisi döngü yapmak suretiyle olabilir.

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

Böylece satır 1, StatusPercentComplete% 50 olur ve ENGPercentComplete% 100 olacaktır.

Herhangi bir yön, çok takdir edilecektir.

kaynak

2016-03-22 Andrew

Sadece bir refactored yüzde hesaplama fonksiyonu ile birlikte kavramın biraz kanıt koymak Status_x veya ENG_x anahtarlarında. Denetleyici işlevinde number% dizesini oluşturmak istemiyorsanız, bağlı html öğesinde yüzde filtresini de kullanabilirsiniz.

Not: Bu çözüm çözüm için

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>

kaynak

2016-03-23 02:30:24

Bu, dev ortamımda çok teşekkür etti, şimdi prod'da deneyeceğim. İhtiyaçlarımın ne kadar dinamik ve kolay olduğu harika. Lodash benim için yeni, bu yüzden harika bir araç gibi görünüyor. – Andrew

@ bennet-adams Bu harika çalışıyor, ancak var ctrl = bunun bildirilmesinin nedeni nedir ve kontrolörü Main olarak mı çağırıyorsunuz? Harika çalışıyor, ancak varlığım nedeniyle, çoğunlukla anlayış eksikliğim nedeniyle, başka değişiklikler yapmakta zorlanıyorum. – Andrew

Kapsamlı değişkenlerin belirli bir denetleyiciye özellikle iç içe geçmiş için açık bir şekilde bağlı kalmasını sağlamak için ["denetleyici olarak" sözdizimi] (https://toddmotto.com/digging-into-angulars-controller-as-syntax/) kullanmak iyi bir uygulamadır. kapsamları. Bu kesinlikle gerekli değildir ve hala izleyiciler ve etkinlik dinleyicileri için $ kapsamı enjekte etmeniz gerekir, ancak açısal^1.2 için önerilen yoldur. –

Bunun gibi bir şeyden bahsettiniz mi?

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: Eğer yeniden kullanabilmek için https://plnkr.co/edit/LjvwhdMvKl9Ntk3q9pbA?p=preview

kaynak

2016-03-23 00:36:37 Konkko

Teşekkürler (... ama şunu bil ki, açısal uygulamalarda standart bağımlılık eğilimi olan) filtreleme için lodash kullanır Çalıştım, ama önceki çözümdeki form değerlerini güncellediğimde yüzdelerdeki yüzdeleri güncelleyemedim. Bir sözlük yaklaşımı düşünmüyordum, bu yüzden kesinlikle benim araçlarımın kitabına ekleyeceğim :) – Andrew

Satır başına angularjs kapsamındaki öğeleri sayın

cevap

İlgili konular