AngularJS filtre/nesneye nesne ekle

Question

Nesnelerim var ve her nesnenin benim sender{sender@demo.abc} gibi bir e-posta gönderen özelliği var. Şimdi bir tabloyu 2 değerle doldurmak istiyorum: 1) isim ("gönderen") ve 2) adresi ("sender@demo.abc").

Şu anda 2 yeni özelliği nesnelere eklemek ve bir ng-yineleme ile oluşturmak için bir filtre kullanıyorum. Sorunum şimdi bir hatayı

olsun olmasıdır [$ rootScope: infdig]

(ama sonuç render kullanabilirsiniz). Ben biraz googled ve sorun benim filtre ve ng-tekrar nesne uzunluğu ile eşleşmeyen özellik uzunluğunda yeni bir dizi oluşturmak olabilir.

Angularjs'e yeni geldim ve filtreyi tamamen yanlış kullanıp kullanmadığımı ve istediğim çözüm için çok daha iyi bir yöntem olup olmadığından emin değilim?

Demo Kod JS:

demoApp.filter("customFilter", function() { 
return function (input) { 
    var result = []; 
    if (input && input.length && input.length > 0) { 
     for (var i = 0; i < input.length; i++) { 
      var senderName = ""; 
      var senderDomain = ""; 
      var both = input[i].Name; 

      both = both.split("").reverse().join(""); 
      senderName = both.substring(both.indexOf("<") + 1).split("").reverse().join(""); 
      senderDomain = both.substring(1, both.indexOf("<")).split("").reverse().join(""); 

      var domainBeforeAt = senderDomain.split("@")[0]; 
      var domainAfterAt = senderDomain.split("@")[1]; 

      var output = { 
       "customId": i, 
       "displayName": senderName, 
       "domain": { 
        "full": senderDomain, 
        "beforeAt": domainBeforeAt, 
        "afterAt": domainAfterAt, 
       } 
      } 

      result.push(output); 
     } 
    } 

    return result;   
} 
}); 

Demo Kodu HTML:

<div ng-repeat="sender in list.Sender | customFilter track by $index"> 

Answer 1

Güncelleme: filtresinde iç içe nesneleri erişme ihtiyacını karşılamak amacıyla, ben şeklini değiştirdik filtre çıktıyı verir.

<td class="col-xs-6">{{sender.Name | customFilter:'domain':'full'}}</td> 

Yani, senin sorunun kaynaklandığını düşünüyorum: output.domain.full dönmek için, eval kullanmadan

.filter("customFilter", function() { 
    return function (input, params) { 
    ... 
    var args = Array.prototype.slice.call(arguments); 
    var toReturn = output; 
    for (var i = 1; i < args.length; i++) { 
     toReturn = toReturn[args[i]]; 
    } 
    return toReturn; 
}; 
}); 

, sen filtreye parametreleri, örneğin iç içe nesnenin seviyelerinde geçmesi gerekecek filtrenizde değil, ng-yineliğinizde $ index ile izlemek istediğinizden. ng-repeat yönergesini div içine kurduktan sonra, filtrenize geçirdiğiniz şey, her biri bir dizide değil, veri kümenizdeki her bir göndericidir, bu nedenle giriş üzerinde bir döngü oluşturmak zorunda kalmazsınız. .

Aşağıdaki pasajda yaptığım bir yaklaşım, filtreye görüntülemek istediğiniz parametreyi (ad, e-posta) iletmek ve bu nesnenin filtresinin çıktılarını almaktır. Başka bir yaklaşım, ayrı bir ad ve e-posta filtresi oluşturmak ve bunları tek tek uygulamaktır, ancak bu şekilde çok fazla kodu tekrar ediyor olmanızdır.

angular.module('demoApp', []) 
 
.controller('SenderListCtrl', function() { 
 
    var ctrl = this; 
 
    
 
    ctrl.Sender = [ 
 
    { 
 
     Name: "my sender<sender@demo.abc>", 
 
     Age: 21 
 
    }, 
 
    { 
 
     Name: "another sender<anothersender@demo.abc>", 
 
     Age: 37 
 
    }, 
 
    { 
 
     Name: "yet another sender<yetanothersender@demo.abc>", 
 
     Age: 28 
 
    } 
 
    ]; 
 
}) 
 
.filter("customFilter", function() { 
 
    return function (input, params) { 
 
    
 
    if (input && input.length && input.length > 0) { 
 
     var senderName = ""; 
 
     var senderDomain = ""; 
 
     var both = input; 
 
     
 
     senderName = both.substring(0, both.indexOf("<")); 
 
     senderDomain = both.substring(both.indexOf("<")+1,both.indexOf(">")); 
 
    
 
     var domainBeforeAt = senderDomain.split("@")[0]; 
 
     var domainAfterAt = senderDomain.split("@")[1]; 
 
     var output = { 
 
     name: senderName, 
 
     email: senderDomain, 
 
     domain: { 
 
      full: senderDomain, 
 
      beforeAt: domainBeforeAt, 
 
      afterAt: domainAfterAt, 
 
     } 
 
     }; 
 
     var args = Array.prototype.slice.call(arguments); 
 
     var toReturn = output; 
 
     for (var i = 1; i < args.length; i++) { 
 
     toReturn = toReturn[args[i]]; 
 
     } 
 
     return toReturn;  
 
    }; 
 
    }; 
 
});

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

 
    <head> 
 
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
    <script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="bootstrap-js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="SenderListCtrl as list"> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <th class="col-xs-6">Name</th> 
 
      <th class="col-xs-6">Email</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="sender in list.Sender track by $index"> 
 
      <td class="col-xs-6">{{sender.Name | customFilter:'name'}}</td> 
 
      <td class="col-xs-6">{{sender.Name | customFilter:'domain':'full'}}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </body> 
 

 
</html>

Şerefe!