Angular-UI 자동 검색: 레이블 표시, 값에만 바인딩

Angular-UI 자동 검색: 레이블 표시, 값에만 바인딩

Angular-UI 자동 검색을 사용하는 방법은 다음과 같습니다.

<input type="text" ng-model="myModel" typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" />

다음과 같은 모델에 바인딩되어 있습니다.

var options = [
    {"value": 1, "text": "value1"},
    {"value": 2, "text": "value2"},
    ...
];

옵션 텍스트는 올바르게 표시되지만 항목을 선택하면 텍스트 상자 안에 값이 표시됩니다.모델이 전체 모델 객체가 아닌 값에만 올바르게 바인딩되어 있습니다.

선택 후 텍스트 상자 안에 "텍스트"("값"이 아닌 "텍스트")를 표시할 수 있습니까? 그래도 모델 바인딩은 값(즉, 특정 "텍스트"를 선택하면 모델이 "값"으로 업데이트됩니다.

이상적이지는 않지만 autoahead-input-formatter 속성은 수정이 제공될 때까지 회피책을 제공합니다(github 스레드에서 플러커).

HTML:

<input type="text" 
       ng-model="myModel" 
       typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" 
       typeahead-editable="false" 
       typeahead-input-formatter="formatLabel($model)" 
/>

AngularJs 컨트롤러 기능:

$scope.formatLabel = function(model) {
   for (var i=0; i< $scope.options.length; i++) {
     if (model === $scope.options[i].value) {
       return $scope.options[i].text;
     }
   }
};

코드를 변경해 보십시오.

typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5"

로.

typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5"

권장하는 대로 실행해 볼 수 있지만 다음과 같이 자동 검색 기능을 선택할 수 있습니다.

<input type="text" 
       ng-model="myModel" 
       typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5" 
       typeahead-editable="false" 
       typeahead-on-select="model=$item.value"
/>

이렇게 하면 텍스트 또는 라벨이 표시되지만 기본 값은 변경됩니다.

Lodash 또는 밑줄을 사용하는 모든 사용자를 위한 속기 포맷은 다음과 같습니다.

function formatTypehead(array,id){
  var o = _.find(array,{id:id});
  return (o?o.displayName || id:id);
}

및 html:

<input  type="text" 
  uib-typeahead="s.id as s.displayName for s in companies | filter:$viewValue | limitTo:8"
  typeahead-input-formatter="formatTypehead(companies, $model)"
  ng-model="model.company"
  >

글쎄요, 저는 지금까지 지시를 통해 가능한 해결책을 찾았습니다.

HTML

<div my-autocomplete my-autocomplete-source="element" my-autocomplete-model="obj[element.model]"></div>

지시.

app.directive('myAutocomplete', function() {
    return {    
        restrict: 'A',
        replace: true,
        template: '<input type="text" name="{{myAutocompleteSource.model}}" placeholder="{{myAutocompleteSource.label}}" ng-model="selected" typeahead="o as o.text for o in myAutocompleteSource.options | filter:$viewValue | limitTo:5" typeahead-editable="false" />',
        scope: {
            myAutocompleteSource: '=',
            myAutocompleteModel: '='
        },
        controller: function($scope) {
            $scope.selected = null;
            $scope.$watch('selected', function() { 
                $scope.myAutocompleteModel = ($scope.selected && 'value' in $scope.selected) ? $scope.selected.value : null; 
            });
        }
    };  
});

음... 이건 속임수에 불과해...좀 더 깔끔하고 자연스러운 방법이 없을까요?코드를 수정하거나 지시문을 사용하지 않고...

나에겐 다음과 같다:

uib-typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)"

다음 대신:

typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)"

정말 쓸모없었다

이렇게 만든 json이 있어요.

[{"RagioneSociale":"Politi Real Estate sas","IDAnagrafica":"2516"},{"RagioneSociale":"COND METROPOLITAN","IDAnagrafica":"4325"}]


Model: {{asyncSelected | json}}
<input type="text" ng-model="asyncSelected" uib-typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">

Ragione Sociale 값만 있는 드롭다운 메뉴와 텍스트와 ID를 모두 보고 일반 {{async Selected}}으로 인쇄할 수 있는 모델이 되었습니다.

언급URL : https://stackoverflow.com/questions/19680616/angular-ui-typeahead-show-label-but-bind-to-value-only