Search code examples
ui-selectangular-ui-select

ui-select without ng-repeat


I need to add two choices to ui-select, and instead of using repeat and an array I think the code is clearer if they are marked up inside <ui-select-choices> (see example below). But it doesn't work, any ideas if this is somehow possible?

     <ui-select ng-model="formula.value">
         <ui-select-match>
            <span ng-bind="$select.selected.name"></span>
         </ui-select-match>
         <ui-select-choices>
             <span>AND</span>
             <span>OR</span>
         </ui-select-choices>
     </ui-select>

Solution

  • This is not possible as ui-select-choices requires the repeat attribute, as seen on line 21 in the source. Instead, the following markup works and doesn't sacrifice readability, IMO:

    <ui-select ng-model="formula.value" theme="bootstrap">
      <ui-select-match>{{ $select.selected }}</ui-select-match>
      <ui-select-choices repeat="choice in ['AND', 'OR']">
        <span>{{ choice }}</span>
      </ui-select-choices>
    </ui-select>
    

    Plunker