선행 문자에 대한 AngularJs UI type ahead match

선행 문자에 대한 AngularJs UI type ahead match

AngularJs UI의 type ahead 기능은 단순하고 강력해 보이지만, 나는 어떻게 하면 주요 캐릭터에 대해 매칭을 수행할 수 있는지 알아내려고 노력해 왔습니다.예를 들어 입력란에 'A'를 입력하면 이름에 'A'를 포함하는 모든 상태가 아니라 'A'로 시작하는 모든 상태를 보고 싶습니다.이에 대해 며칠 동안 찾아봤는데 Angular가 '비교기'를 가진 커스텀 필터 개념을 가지고 있는 것 같습니다.이 문서에는 비교기 구현을 위한 정확한 구문을 보여주지 않는 간단한 예가 있습니다.

html은 다음과 같습니다.

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

기본 자바스크립트는 다음과 같습니다.

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'];
    }

여기 http://plnkr.co/edit/LT6pAnS8asnpFEd5e6Ri 에 플렁커가 있습니다.

그래서 간단히 말해서 과제는 Angular를 얻는 것입니다.선두 문자에만 일치하도록 UI를 미리 입력합니다.

이에 대한 도움이나 아이디어를 주시면 대단히 감사하겠습니다.

결국 당신의 질문은 정말로 특별한 것이 아닙니다.typeahead지시적이지만, 그것은 어떻게 Angular와 더 관련이 있습니다.JS 필터가 작동합니다.

작업 솔루션을 제시하기 전에 다음 사항을 참고하시기 바랍니다.typeahead지시는 Angular를 많이 사용합니다.JS 인프라($http, 약속) 및 표현 언어.그래서 중요한 것은 그 사실을 깨닫는 것입니다.states | filter:selected각진 것에 지나지 않습니다.JS 표현.

위 식을 살펴보면 일치하는 항목 목록을 반환하기 위해 배열을 필터링하는 방법을 찾아야 합니다.type ahead 명령에 대한 유일한 특별한 점은 다음과 같습니다.$viewValue사용자가 입력 상자에 입력한 값을 나타내는 변수입니다.그래서 기본적으로 우리는 단지 그들이states배열: 항목을 반환합니다.$viewValue.

필터는 여러 가지 방법이 있지만 필터의 비교기를 언급하셨기 때문에 (Angular의 1.1.x 버전에서만 소개되었습니다)JS) 결과 목록에 주어진 항목을 반환해야 하는지 여부를 결정해야 하는 비교자 함수를 정의해야 합니다.이러한 기능은 다음과 같이 나타날 수 있습니다.

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

사용법을 정의하는 것은 매우 간단합니다.

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

작동 중인 플렁크: http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=preview

사용자 지정 필터는 typehead auto completion 박스의 선두 문자에 대해 일치를 가져옵니다.

(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" >

방금 답변으로 표시된 게시물을 편집했는데 목록에 ID와 제목이 모두 있을 때 작동합니다.

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

js:

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

언급URL : https://stackoverflow.com/questions/18429967/angularjs-ui-typeahead-match-on-leading-characters