Khớp chữ trên giao diện người dùng AngularJs trên các ký tự hàng đầu

Question

Chức năng đánh máy trong giao diện người dùng AngularJs có vẻ đơn giản và mạnh mẽ tuy nhiên tôi đã cố gắng tìm ra cách kết hợp được thực hiện trên các ký tự hàng đầu. Ví dụ: nếu tôi nhập 'A' trong hộp nhập liệu, tôi muốn xem tất cả các trạng thái bắt đầu bằng 'A' và không phải tất cả các trạng thái có chứa 'A' trong tên. Tôi đã tìm kiếm một vài ngày về điều này và dường như Angular có khái niệm về một bộ lọc tùy chỉnh có một 'bộ so sánh'. Các tài liệu về điều này có một ví dụ đơn giản không hiển thị cú pháp chính xác để thực hiện một bộ so sánh. :

<div>Selected: <span>{{selected}}</span></div> 
    <div><input type="text" ng-model="selected" typeahead="name for name in states | filter:selected"></div> 

Các javascript cơ bản trông như thế này

angular.module('firstChar', ['ui.bootstrap']); 

    function TypeaheadCtrl($scope) { 
     $scope.selected = undefined; 
     $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; 
    } 

Tôi có một plunker đây http://plnkr.co/edit/LT6pAnS8asnpFEd5e6Ri

Vì vậy, thách thức trong một nutshell là để có được AngularUI typeahead để phù hợp chỉ trên các nhân vật hàng đầu.

Bất kỳ trợ giúp hoặc ý tưởng nào về điều này sẽ được đánh giá cao.

Answer 1

Vào cuối ngày, câu hỏi của bạn không thực sự cụ thể với chỉ thị typeahead nhưng nó có liên quan nhiều hơn đến cách bộ lọc AngularJS hoạt động.

Trước khi trình bày giải pháp làm việc, xin lưu ý rằng chỉ thị typeahead sử dụng nhiều cơ sở hạ tầng AngularJS ($ http, lời hứa) và ngôn ngữ biểu thức. Vì vậy, điều quan trọng là nhận ra rằng các states | filter:selected là không có gì nhiều hơn một biểu thức AngularJS.

Nhìn vào biểu thức trên, chúng ta cần tìm cách lọc mảng để trả về danh sách các mục phù hợp. Điều đặc biệt duy nhất về chỉ thị typeahead là có một biến số $viewValue đại diện cho một giá trị được nhập bởi người dùng trong hộp nhập liệu. Vì vậy, về cơ bản chúng tôi chỉ cần lọc mảng states để trả về các mục bắt đầu bằng $viewValue. Có rất nhiều cách để làm điều này nhưng vì bạn đã đề cập đến bộ so sánh cho các bộ lọc (xin lưu ý rằng các bộ lọc này chỉ được giới thiệu trong phiên bản 1.1.x của AngularJS), bạn sẽ phải xác định một hàm so sánh nên quyết định xem mục được đưa ra phải được trả về trong danh sách kết quả hay không. một chức năng như vậy có thể trông giống như sau:

$scope.startsWith = function(state, viewValue) { 
    return state.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase(); 
} 

Có nó được xác định việc sử dụng rất đơn giản:

typeahead="name for name in states | filter:$viewValue:startsWith" 

Đây là liệng làm việc: http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=preview

Answer 2

lọc tuỳ chỉnh cho được những hợp được được thực hiện trên các ký tự dẫn đầu trong hộp hoàn thành tự động loại đầu.

(function() { 
 

 
    // Create global filters using angular.filter() only. Never use local filters inside 
 
    // controllers/services. This enhances testing and reusability. 
 
    function xpTypeaheadFilter() { 
 
      return function(items, props) { 
 

 
      var out = []; 
 
      
 
      if (angular.isArray(items)) { 
 

 
       items.forEach(function(item) { 
 
       
 
       
 

 

 
       var text = props.toLowerCase(); 
 
       var itemLoverCase =item.toLowerCase(); 
 
       var substr = itemLoverCase.substr(0, text.length); 
 

 
        
 
       if (substr === text) { 
 
        
 
        out.push(item); 
 
         
 
       } 
 
       
 

 
       }); 
 
      } else { 
 
       // Let the output be the input untouched 
 
       out = items; 
 
      } 
 
      console.log("out lem", out.length); 
 

 
      return out; 
 
      }; 
 
    } 
 

 
    // Pass functions into module methods rather than assigning a callback. 
 
    // This helps aid with readability and helps reduced the amount of code "wrapped" 
 
    // inside Angular. 
 
    angular.module('common') 
 
    .filter('xpTypeaheadFilter', xpTypeaheadFilter); 
 
})();

<input type="text" ng-model="vesselName" placeholder="Vessel Name" typeahead="vesselName for vesselName in vesselNames | xpTypeaheadFilter:$viewValue | limitTo:8" class="form-control form-textbox" >

Answer 3

Tôi chỉ bài viết được đánh dấu là đã trả lời và nó hoạt động khi danh sách là có Id và tiêu đề cả:

<input type="text" ng-model="ledgerstatementModel.Supplier" typeahead="supplier as supplier.Name for supplier in supplierList | filter:{Name:$viewValue}:startsWith" class="form-control"> 

và trong js:

$scope.startsWith = function (supplier, viewValue) { 
     return supplier.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase(); 
    }