ng-repeat is not showing all values of the array when i select a particular option

94 views Asked by At

i am working with ui-select-match and ng-repeat

i have an array with five values as shown below in occurrence. My code is working fine except that when i select first option all disappears from the dropdown and after that if when i select "second" than "all" shows up in dropdown options. here is my html code

 <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" id="sdlPrdAddS_sdlAvlF_awkC">
        <div class="formElement" id="sdlPrdAddS_sdlAvlF_awk">
            <p id="sdlPrdAddS_sdlAvlF_awkL">
                <label>{{'healthcareService.addSchedule.availability.occurrence' | translate}}</label><span class="red">*</span></p>
            <ui-select multiple name="occurrenceInMonth" data-ng-model="scheduleFormObj.daysOfWeekInput.occurrence" id="sS_adR_occureence" on-select="removeExtraFields()" ui-select-required="true">
                <ui-select-match placeholder="{{'healthcareService.addSchedule.scheduleDetails.select' | translate}}">
                    {{$item}}
                </ui-select-match>{{occurrence}}
                <ui-select-choices repeat="occurrence in scheduleStaticObjs.occurrence">
                    <div ng-bind-html="occurrence"></div>
                </ui-select-choices>
            </ui-select>
        </div>
   </div>

My object is this:

scheduleStaticObjs.occurrence =
["All","First","Second","Third","Fourth","Fifth"]
1

There are 1 answers

0
Artisan On

I think you might want to check what happens in your on-select="removeExtraField()" as it might be the problem

Check out this jsfiddle to see a working version of what you might need

<div ng-app="test">
  <div ng-controller="MainCtrl">
    <ui-select multiple ng-model="test" theme="bootstrap">
      <ui-select-match allow-clear="true" placeholder="Pick one...">
        {{$item}}
      </ui-select-match>
      <ui-select-choices repeat="val in test_values">
        <span ng-bind="val"></span>
      </ui-select-choices>
    </ui-select>
  </div>
</div>

The JS below:

angular.module('test', ['ui.select']);

angular
  .module('test')
  .controller('MainCtrl', function($scope) {
    $scope.test_values = ["All", "First", "Second", "Third", "Fourth", "Fifth"]
  });

Hope this helps