각도 UI- 부트 스트랩 typeahead 테이블에

Question

정말 간단한 질문이지만, 어떻게 형제가 내 앞잡이와 다른 테이블에서 작동하는 테이블에서 작동하도록 설정할 수 있습니까?

예를 들어 테이블에 외래 키가 있고 사용자가 외래 키의 기본 테이블에있는 각각의 NAME 값을 기반으로이 키를 선택할 수 있도록하려고합니다.

코드 예제 :이 예와

<table class="table table-bordered table-hover table-striped rwd-table" id="page-wrap"> 
<thead> 
    <tr> 
     <th>Primary ID</th> 
     <th>Foreign Key (As Name)</th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="p in PrimaryTable" id="display"> 
     <td data-th="ID">{{p.PrimaryID}}</td> 
     <td> 
      <input id="ForeignKeyName" 
        type="text" 
        ng-model="p.ForeignKeyID" 
        uib-typeahead="f.ForeignKeyID as f.ForeignKeyName for f in ForeignKeyTable | filter:$viewValue"        
        class="form-control"> 
     </td>     
    </tr> 
</tbody> 

, 나는 사용자가 이름 값 대신 ID 값으로 "(이름) 외래 키"을 참조 할 것. 트릭은 기본 값을 ID로 사용하고 ng 모델에서 통지 한대로 원래 값과 일치하도록 매핑해야한다는 것입니다.

업데이트 : 이전 질문과 일치하는 또 다른 질문은 PrimaryTable.ForeignKeyID 대신 ForeignKeyTable.ForeignKeyName을 표시하도록 ng-model을 설정하는 방법입니다.

이것은 uib-typeahead가 ForeignKeyTable.ForeignKeyID과 ForeignKeyTable.ForeignKeyName과 일치하지만 두 개의 개별 테이블을 사용하는 것과 비슷합니다 (상상해보십시오). 내가 원하는 것이 무엇

는 ng-model: PrimaryTable.ForeignKeyID as ForeignKeyTable.ForeignKeyName

Answer 1

우선은 PrimaryKeyTable 행을 사용자가 선행 입력에서 값을 선택 할 때마다 업데이트 될 것이다 넣을 수있을 것입니다. 선택한 항목을 잡고 ForeignKeyId 값을 PrimaryTable 행에 수동으로 지정해야합니다. 이것을 수행하는 방법은 당신의 타입 어 헤드에 typeahead-on-select 지시어를 추가하고 그 값을 할당하는 함수에 바인드하는 것입니다.

그것은 다음과 같을 것이다 :

HTML 컨트롤러 내부

<tr ng-repeat="p in PrimaryTable" id="display"> 
    <td data-th="ID">{{p.PrimaryID}}</td> 
    <td> 
     <input id="ForeignKeyName" 
        type="text" 
        ng-model="selectedItem" <!-- could be anything really for we will not use it here --> 
        uib-typeahead="f.ForeignKeyID as f.ForeignKeyName for f in ForeignKeyTable | filter:$viewValue" 
        typeahead-on-select="onSelect($item, $model, $label, p)"        
        class="form-control"> 
    </td>     
</tr> 

$scope.onSelect = function($item, $model, $label, primaryKeyTableRow) { 
    primaryKeyTableRow.ForeignKeyId = $item.ForeignKeyId; 
} 

다음 단계에 해당 ForeignKeyTable 행의 name 속성 값을 표시하는 것입니다 ForeignKeyId f 각 행에 PrimaryKeyTable rome 적절한 항목을 찾으려면 ForeignKeyTable을 필터링해야하기 때문에 제어기 내부에 로직을 배치하는 것이 좋습니다. 해당 이름을 표시하려는 행이 여러 개 있기 때문에 각 행에 대해 ForeignKeyTable을 별도로 필터링해야합니다. 이것은 ng-repeat에 대한 ng-controller이 유용합니다. 우리가 할 일은 ng-repeat에 의해 생성 된 각 테이블 행에 대한 새로운 컨트롤러를 바인드하고 해당 컨트롤러 안에 로직을 넣는 것입니다.

<tr ng-repeat="p in primaryKeyTable" ng-controller="itemController"> 
    <!-- ... --> 
</tr> 

을 우리는 JS 파일에 새로운 컨트롤러를 정의해야합니다 : HTML에서 그것과 같을 것이다

app.controller('itemController', function() { 
    // ... 
}); 

이제 우리는 테이블의 각 행에 대해 별도의 로직을 가질 수 있습니다. 따라서 ForeignKeyTable을 필터링하여 해당 항목을 찾고 이름을 표시 할 수 있습니다.

전체 코드 종류 나는 plunker에 넣어 한 큰이므로 : http://plnkr.co/edit/xccgnpxoPHg6vhXWPwZn?p=preview

은 당신이 그것으로 무엇을 할 수 참조하십시오.