2017-12-25 64 views
5

Đây là a sample angular directive to prevent typing non-numeric keys (StackOverflow answer). Tôi muốn viết một cái gì đó như this fiddle để sử dụng chỉ thị số trong một số đầu vào. Xin lưu ý rằng vì tôi có các chỉ thị khác nhau trong các đầu vào của mình, tôi không thể sử dụng cùng một mẫu như được đề xuất trong bản cập nhật câu trả lời được đề cập ở trên.Chỉ thị góc: Chỉ cho phép các số

var $scope; 
var app = angular.module('myapp', []); 

app.controller('Ctrl', function($scope) { 
    $scope.myNnumber1 = 1; 
    $scope.myNnumber2 = 1; 
}); 

app.directive('isNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element) { 
      scope.$watch(element.ngModel, function(newValue,oldValue) { 
       newValue = String(newValue); 
       newValue = newValue.replace('۰', '0').replace('۱', '1').replace('۲', '2').replace('۳', '3').replace('۴', '4').replace('۵', '5').replace('۶', '6').replace('۷', '7').replace('۸', '8').replace('۹', '9'); 
       var arr = String(newValue).split(""); 
       if (arr.length === 0) return; 
       if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return; 
       if (arr.length === 2 && newValue === '-.') return; 
       if (isNaN(newValue)) { 
        element.ngModel = oldValue; 
       } 
      }); 
     } 
    }; 

Cập nhật: Xin hãy xét rằng tôi cần phải làm một số quy trình để chuyển đổi số tiếng Anh không và vân vân. Tôi đã tạo ra a new fiddle here dựa trên câu trả lời của Angular_10. Bây giờ, mọi điều đều ổn, ngoại trừ vị trí con trỏ trong khi gõ số Ba Tư. Khi tôi gõ một số Ba Tư, nó được thay thế bằng số tương đương bằng tiếng Anh, nhưng con trỏ đột nhiên nhảy đến cuối.

+0

Xin hãy giải thích câu hỏi của bạn một cách chi tiết những gì bạn muốn đạt được và những gì bạn đã cố gắng. –

+0

@ Angular_10 [The js và html] (http://jsfiddle.net/AMShafiee/u1w9v2m7/) mã mà tôi đã viết bằng cách sử dụng một chỉ thị để ngăn chặn nhập các phím số không hoạt động. Vui lòng kiểm tra [the fiddle] (http://jsfiddle.net/AMShafiee/u1w9v2m7/) và cho tôi biết làm thế nào tôi có thể sửa nó. – Ahmad

Trả lời

6

OK! Nhìn vào yêu cầu của bạn, tôi đã tự do và viết nhiều chỉ thị tùy chỉnh hơn.

Đây là fiddle cho cùng

Vấn đề

Ví dụ từ đó bạn gọi và thực hiện thay đổi để chỉ thị cụ thể được gây ra vấn đề.

  1. $ phạm vi của bạn tên biến là sai trong HTML/JS ($ scope.myNnumber1 = 1; $ scope.myNnumber2 = 1; trong JS và trong HTML nó được ng mô hình = "myNumber1")
  2. Bạn đang truy cập element ng-model và cố gắng sửa đổi nó thông qua chỉ thị mà là thực hành không tốt và cũng là nguyên nhân gốc để chỉ thị không hoạt động. Bạn không thay đổi giá trị ng-model nhưng lần lượt sửa đổi giá trị phần tử HTML mà góc cạnh sẽ không nhận ra.
  3. Hơn sử dụng $watch trong chỉ thị không phải lúc nào cũng thích hợp hơn vì lợi ích hiệu suất.

Giải pháp

app.directive('isNumber', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function(scope, element, attr, ctrl) { 
      function inputValue(val) { 
       if (val) { 
        var numeric = val.replace(/[^- 0-9]/g, ''); 

        if (numeric !== val) { 
         ctrl.$setViewValue(numeric); 
         ctrl.$render(); 
        } 
        return numeric; 
       } 
       return undefined; 
      } 
      ctrl.$parsers.push(inputValue); 
     } 
    }; 

}); 

Khi giao tiếp điều khiển được yêu cầu từ chỉ thị chúng ta có thể vượt qua điều khiển như 4 param trong liên kết function.From rằng Ctrl param chúng ta có thể sửa đổi/xem mọi thứ từ phạm vi điều khiển.

Sử dụng một số biểu thức chính quy cơ bản để tìm hiểu đầu vào được nhập là gì và đặt nó trong giá trị chế độ xem đối tượng phạm vi bộ điều khiển.

ctrl.$setViewValue(numeric); //to set the value in the respective ngModdel 
ctrl.$render(); //to display the changed value 

Thông tin thêm về $setViewValue

+0

Vui lòng kiểm tra cập nhật và xem xét rằng tôi cần thực hiện một số quy trình để chuyển đổi các số không phải tiếng Anh. Làm thế nào tôi có thể thay thế những con số không phải tiếng Anh này sang tiếng Anh? (Tôi cũng đã cập nhật fiddle ban đầu của mình.) – Ahmad

+1

Số không phải là tiếng Anh là gì?Nếu bạn đang đề cập đến người dùng nhập một số giá trị bàn phím không phải tiếng Anh thì bạn phải cân nhắc sử dụng một số thư viện bên ngoài để thực hiện loại chuyển đổi đó thành số bình thường –

+0

Bạn có phiền không, hãy xem bản cập nhật? – Ahmad

Các vấn đề liên quan