Làm cách nào để thực hiện lọc hai chiều trong AngularJS?

Một trong những điều thú vị mà AngularJS có thể làm là áp dụng bộ lọc cho một biểu thức liên kết dữ liệu cụ thể, đây là một cách thuận tiện để áp dụng, chẳng hạn như tiền tệ theo văn hóa cụ thể hoặc định dạng ngày của các thuộc tính của mô hình. Nó cũng rất tuyệt khi có các thuộc tính được tính toán trên phạm vi. Vấn đề là cả hai tính năng này đều không hoạt động với các tình huống kết hợp dữ liệu hai chiều - chỉ kết hợp dữ liệu một chiều từ phạm vi đến chế độ xem. Đây dường như là một thiếu sót rõ ràng trong một thư viện tuyệt vời khác - hay tôi đang thiếu thứ gì đó?

Trong KnockoutJS , tôi có thể tạo một thuộc tính tính toán đọc / ghi, cho phép tôi chỉ định một cặp hàm, một hàm được gọi để lấy giá trị của thuộc tính và một hàm được gọi khi thuộc tính được đặt. Điều này cho phép tôi triển khai, ví dụ: đầu vào nhận biết văn hóa - cho phép người dùng nhập "$ 1,24" và phân tích cú pháp đó thành một float trong ViewModel và có những thay đổi trong ViewModel được phản ánh trong đầu vào.

Điều gần nhất mà tôi có thể tìm thấy tương tự như điều này là việc sử dụng $scope.$watch(propertyName, functionOrNGExpression);This cho phép tôi có một hàm được gọi khi một thuộc tính trong $scopethay đổi. Nhưng điều này không giải quyết được, ví dụ, vấn đề đầu vào nhận thức về văn hóa. Lưu ý các vấn đề khi tôi cố gắng sửa đổi thuộc $watchedtính trong $watchchính phương thức:

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

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

Phần tử đầu vào rất khó hiểu khi người dùng bắt đầu nhập. Tôi đã cải thiện nó bằng cách chia thuộc tính thành hai thuộc tính, một cho giá trị chưa được phân tích cú pháp và một cho giá trị đã phân tích cú pháp:

$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/ )

Đây là một cải tiến so với phiên bản đầu tiên, nhưng dài dòng hơn một chút và lưu ý rằng vẫn còn một vấn đề về thuộc parsedValuetính của phạm vi thay đổi (nhập một cái gì đó vào đầu vào thứ hai, điều này sẽ thay đổi parsedValuetrực tiếp. Lưu ý rằng đầu vào trên cùng không cập nhật). Điều này có thể xảy ra từ hành động của bộ điều khiển hoặc do tải dữ liệu từ một dịch vụ dữ liệu.

Có cách nào dễ dàng hơn để thực hiện kịch bản này bằng AngularJS không? Tôi có thiếu một số chức năng trong tài liệu không?

Hóa ra có một giải pháp rất hữu ích cho vấn đề này, nhưng nó không được ghi chép đầy đủ.

Định dạng giá trị mô hình để hiển thị có thể được xử lý bởi |toán tử và một góc formatter. Nó chỉ ra rằng ngModel không chỉ có danh sách các bộ định dạng mà còn có một danh sách các bộ phân tích cú pháp.

1. Sử dụng ng-modelđể tạo liên kết dữ liệu hai chiều

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

2. Tạo một chỉ thị trong mô-đun góc của bạn sẽ được áp dụng cho cùng một phần tử và điều đó phụ thuộc vào ngModelbộ điều khiển

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

3. Trong linkphương pháp này, hãy thêm bộ chuyển đổi tùy chỉnh của bạn vào ngModelbộ điều khiển

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

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

4. Thêm chỉ thị mới của bạn vào cùng một phần tử đã có ngModel

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

Dưới đây là một ví dụ làm việc chuyển đổi văn bản thành chữ thường inputvà trở lại chữ hoa trong mô hình

Các tài liệu API cho Controller mẫu cũng có một giải thích ngắn gọn và tổng quan về các phương pháp có sẵn khác.