2015-01-22 2 views
0

서비스에서 푸시 된 데이터를 바인딩하고 새로 고침하는 Uiselect에서 기본 옵션/선택 항목 (예 : '클릭') '이 있어야합니다. 사용자가 서비스에서 가져온 데이터를 사용자가 입력 할 때 사용자 입력을 기반으로.UISelect 기본 선택/옵션

내 현재 UISelect 구현은 내가 좋아하는 사용자에게 항상 기본 옵션을 추가 할이

<ui-select id="agencySelect" class="form-control" ng-model="selectedAgencies.selectedAgency" theme="select2" on-select="onAgencySelected()" ng-disabled="disabled" required autofocus> 
    <ui-select-match >{{$select.selected.Name}} ({{$select.selected.AgencyKey}})</ui-select-match> 
    <ui-select-choices refresh="funcAsync('Agencies',$select.search)" refresh-delay="0" repeat="agency in agencies | filter:$select.search"> 
     <div>{{agency.Name}} ({{agency.AgencyKey}})</div> 
    </ui-select-choices> 
</ui-select> 

같은이 항상 상관없이 사용자에게 표시되어, '뭔가를 클릭' 필터링 데이터 원본

Can 우리는 이것과 같은 것을 가지고 있습니까?

 <ui-select id="agencySelect" class="form-control" ng-model="selectedAgencies.selectedAgency" theme="select2" on-select="onAgencySelected()" ng-disabled="disabled" required autofocus> 
    <ui-select-match >{{$select.selected.Name}} ({{$select.selected.AgencyKey}})</ui-select-match>   
    <ui-select-choices null-label="Click to do something" refresh="funcAsync('Agencies',$select.search)" refresh-delay="0" repeat="agency in agencies | filter:$select.search"> 
     <div ng-trim="false">{{agency.Name}} ({{agency.AgencyKey}})</div> 
    </ui-select-choices> 
</ui-select> 

이제 임 내가

<ui-select-choices null-label="Click to do something" refresh="funcAsync('Agencies',$select.search)" refresh-delay="0" repeat="agency in agencies | filter:$select.search"> 
     <div>{{agency.Name}} ({{agency.AgencyKey}})</div> 
    </ui-select-choices> 
</ui-select> 

필터링에도 불구하고 사용자가 항상 사용할 수있는이 기본 옵션을 가지고 수행 할 작업이

<ui-select-choices refresh="funcAsync('Agencies',$select.search)" refresh-delay="0" repeat="agency in agencies | filter:$select.search"> 
     <div >{{agency.Name}} ({{agency.AgencyKey}})</div> 
    </ui-select-choices> 
</ui-select> 

을하고.

참고 : 내가 할 수있는 한 가지 방법은 데이터 소스에 항상 '첫 번째 항목으로'옵션을 추가하는 것입니다.하지만 사용자가 필터링하거나 서버에서 데이터를 가져 오려고 할 때마다 소스가 엉망이되고 싶지는 않습니다. .

감사합니다.

+0

내가 왜이 다운 투표를했는지 알 수 있습니까? –

답변

0

그냥 실제로이 코드가 UI-선택 자식의 repo 그 자체의 데모에서 plunk를 볼 수있는 UI - 선택 일치 지시어

<ui-select ng-model="address.selected" 
     theme="bootstrap" 
     ng-disabled="disabled" 
     reset-search-input="false" 
     style="width: 300px;"> 
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match> 
<ui-select-choices repeat="address in addresses track by $index" 
     refresh="refreshAddresses($select.search)" 
     refresh-delay="0"> 
    <div ng-bind-html="address.formatted_address | highlight: $select.search"></div> 
</ui-select-choices> 

에 자리 표시 자 속성을 추가 아주 간단합니다