AngularJS 부트스트랩오브젝트 및 선택 기능을 갖춘 UI 자동 검색

AngularJS 부트스트랩오브젝트 및 선택 기능을 갖춘 UI 자동 검색

http://angular-ui.github.io/bootstrap/,을 사용하여 Angular에서 자동 검색을 구현하려고 합니다. 자동 검색 필드에 전체 주소가 표시되지만 한 번 클릭하면 해당 주소에 대한 우편 번호만 다른 필드에 입력됩니다.ng-change 또는 ng-click을 사용하려고 합니다만, 잘 되지 않습니다.

http://jsfiddle.net/UxTBB/2/

angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope) {
    $scope.selected = '';
    $scope.states = [{postcode:'B1',address:'Bull ring'},{postcode:'M1',address:'Manchester'}];
    $scope.setPcode = function(site) {
        $scope.selPcode = site.postcode;
        };
});

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid">
                postcode <input type="text" ng-model="selPcode" />
                typeahead <input type="text"  ng-change="setPcode(site)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />
            </div>
        </form>
    </div>
</div>

좋은 생각 있어요?

http://angular-ui.github.io/bootstrap/의 자동 검색 지시는 매우 유연하며 원하는 기능을 실현하는 방법은 여러 가지가 있습니다.그 중 2개를 발표하겠습니다.

첫째, 자동 검색 지시문은 Angular와 매우 유사한 구문을 사용합니다.JS 지시문을 선택합니다.이렇게 하면 표시된 레이블과 모형 값으로 바인딩된 데이터를 완전히 제어할 수 있습니다.그래서 할 수 있는 일은 단순히 주소를 라벨로 표시하여 우편번호와selPcode직접:

<input type="text" ng-model="selPcode" typeahead="state.postcode as state.address for state in states | filter:$viewValue" typeahead-editable="false" />

여기서 중요한 건as부품은 에 있습니다.typeahead식:typeahead="state.postcode as state.address for state in states

또, 제가 사용하고 있는 것은,typeahead-editable="false"선택한 경우에만 모델을 바인딩할 특성입니다.여기 jsFiddle이 있습니다.http://jsfiddle.net/jLupa/

콜백 함수를 사용할 필요가 있는 경우 다른 해결 방법은typeahead-on-select속성:

<input type="text"  typeahead-on-select="setPcode($item)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />

일치가 선택되었을 때 콜백을 지정할 수 있습니다.여기서 작업하고 있는 바이올린:http://jsfiddle.net/t8BV2/

마지막 메모로:ng-change선택 항목만 캡처하는 동안 입력 변경에 반응하기 때문에 여기서는 작동하지 않습니다. ng-click는 입력 필드를 클릭하면 반응하고 일치 팝업이 표시되지 않기 때문에 큰 도움이 되지 않습니다.게다가 키보드를 사용해 선택해도 반응하지 않습니다.

@pkozlowski-sources의 훌륭한 솔루션에는 한 가지 단점이 있습니다.ng-model 속성에서 자동 검색을 초기화할 수 없습니다.적어도 이 방법으로는 아이템의 설명을 표시할 수 없고 코드는 표시할 수 없습니다.

자동 검색을 다음과 같이 구성하여 이 문제를 해결할 수 있는 방법을 찾았습니다.

<input type="text" ng-model="selected" typeahead="state as state.address for state in states | filter:$viewValue" />

그러면 상태 개체가 모델 속성에 반환되며, 이 속성은 값을 적절한 개체로 설정하여 초기화할 수 있습니다.

    $scope.selected = {postcode:'M1',address:'Manchester'};

여기서 작업 : https://jsfiddle.net/0y3ntj4x/3/

이 시나리오는 오토어헤드용 앵귤러 부트스트랩 문서에는 없는 것 같습니다.

저도 비슷한 문제가 있어요.

<input type="text" ng-model="select" typeahead="a as a.Value for a in countries | filter:{{ Value:$viewValue }} "class="form-control" typeahead-editable="false" >

{ Code: AL,ParentCode: null,Value: Albania,Id: 1206,Name: countries }

하지만 이런 식으로 서비스를 사용하면 효과가 있습니다.

$scope.countries = []; _services.getcountries(function(result) { $scope.countries = result; });

해결했습니다.

$scope.countries = []; _services.getcountries(function(result) { $.each(result, function(i, o) { $scope.countries.push(o); }); });

누군가 도와주길 바란다.

@pkozlowski.subsource에서 제공하는 답변에 추가하려고 합니다.jsfiddle.net/jLupa에 표시되는 동작은 Angular의 UI-Bootstrap 버전 0.10.0에서는 동작하지 않습니다.jsfiddle.net/jLupa/87/ 를 참조해 주세요.변경은 버전 0.10.0으로 갱신한 것 뿐이며, 양쪽 입력 박스가 우편번호로 해결되는 것을 알 수 있습니다.

이것은 twitter의 자동 검색을 사용하는 또 다른 값 angularjs 지시어 목록입니다.https://github.com/mihaigiurgeanu/lov-typeahead부트스트랩과 함께 사용할 수 있지만 부트스트랩 없이 사용할 수도 있습니다.

라우어를 사용하고 있는 경우는, 다음의 순서에 따라서 인스톨 할 수 있습니다.

bower install lov-typeahead --save

try the following before saving / validating 

모델 Ctrl$setValidity('편집 가능', True);

언급URL : https://stackoverflow.com/questions/17856126/angularjs-bootstrapui-typeahead-with-object-selection-functionality