SORU
23 Temmuz 2012, PAZARTESİ


Nasıl iki yönlü angular.js filtreleme yapmak için?

Bir ilginç şey Angular.js yapabilirim. geçerli bir filtre için belirli bir veri bağlama ifadesi olan, uygun bir şekilde uygulamak için, örneğin, kültür-belirli bir para birimi veya tarih biçimlendirme modeli özellikleri. Ayrıca hoş kapsamında hesaplanan özelliklere sahip. Sorun bu özelliklerin hiçbiri iki yönlü veri bağlama senaryoları-tek yönlü görünüm kapsamı gelen veri ile çalışmak. Aksi takdirde bu mükemmel bir kütüphane ya da ben bir şey eksik? bir eksiklik gibi görünüyor

KnockoutJS, elimden oluşturmak için bir okuma/yazma hesaplanan özellik, izin bana belirtin bir çift fonksiyon, tek çağrılan almaya değer özelliği, ve hangisi olduğunu çağrıldığında özelliği ayarlanır. Bu izin bana uygulamak, örneğin, kültür-farkında giriş - izin kullanıcı tipi "$1.24" ve ayrıştırma içine bir mala, ViewModel ve değişiklikler ViewModel yansıyan girdi.

Buna benzer bulabildiğim en yakın şey $kapsam kullanın.$izle(propertyName, functionOrNGExpression); Bu bana bir fonksiyon kapsam değişiklikleri $bir özellik anlamışlardı sağlar. Ama bu, örneğin, kültür-farkında giriş sorunu çözmez. İzlemek yöntemi kendisi $içinde $izlenen özellik değiştirmeye çalıştığınızda sorunlara dikkat edin

$scope.$watch("property", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: "   oldValue   " newValue: "   newValue;
    $scope.property = Globalize.parseFloat(newValue);
});

(http://jsfiddle.net/gyZH8/2/)

Giriş öğesi kullanıcı yazmaya başladığında çok şaşkın. İki özellik, ayrıştırılamayan değeri ve ayrıştırılmış değer: bir özelliği bölerek bunu geliştirdim

$scope.visibleProperty= 0.0;
$scope.hiddenProperty = 0.0;
$scope.$watch("visibleProperty", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: "   oldValue   " newValue: "   newValue;
    $scope.hiddenProperty = Globalize.parseFloat(newValue);
});

(http://jsfiddle.net/XkPNv/1/)

Bu gelişme üzerine ilk versiyonu, ama biraz daha ayrıntılı ve fark ortada hala bir sorun parsedValue özelliği kapsamındaki değişiklikler (tip şeyler ikinci giriş, hangi değişiklikleri parsedValue doğrudan. üst giriş güncelleme yapmaz dikkat edin). Bu denetleyici bir eylem veya veri hizmeti veri yüklenmesini itibaren olabilir.

Biraz daha kolay yolu bu senaryo angular.js kullanarak uygulamak için var mı? Eksik bazı belgelerde işlevselliği mıyım?

CEVAP
18 EKİM 2012, PERŞEMBE


Bu çok zarif bir çözüm var çıkıyor, ama iyi belgelenmiş değil.

Görüntü için model değerleri biçimlendirme | operatör ve bir açısal formatter tarafından ele alınabilir. Sadece hale getirilmesini listesi aynı zamanda ayrıştırıcı bir liste olduğunu ngModel bu döner.

1. ng-model iki yönlü veri bağlama oluşturmak için kullanın

<input type="text" ng-model="foo.bar"></input>

2. Aynı eleman için uygulanacak olan açısal modülünde bir yönerge oluşturmak ve bu ngModel denetleyici bağlıdır

module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ...
        }
    };
});

3. link yöntemi içinde ngModel denetleyicisi için özel dönüştürücüler ekleyin

function fromUser(text) {
    return (text || '').toUpperCase();
}

function toUser(text) {
    return (text || '').toLowerCase();
}
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);

4. Zaten ngModel aynı öğe için yeni bir satır ekleyin

<input type="text" lowercase ng-model="foo.bar"></input>

İşte metin input ve modelde büyük harfe küçük harfe geri dönüşümleri working example

API Documentation for the Model Controller da kısa bir açıklama ve diğer mevcut yöntemlere genel bir bakış vardır.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Philip DeFranco

    Philip DeFra

    16 EYLÜL 2006
  • RobertDuskin

    RobertDuskin

    12 HAZİRAN 2008
  • William Hyde

    William Hyde

    23 HAZİRAN 2008