Hide element when selected by another Select

Asked

Viewed 160 times

0

I have two Select’s that have the same list of people. When I select "Maria" from select A this option should be hidden from select B, since we cannot select the same person from both selects.

<div class="row">
    <div class="col-md-6">
        <label>
            Testemunha 1 :
        </label>
        <select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
                ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
            <option></option>
        </select>
    </div>

    <div class="col-md-6">
        <label>
            Testemunha 2 :
        </label>
        <select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2" 
                ng-options="obj as obj.pessoa.nome for obj in lstTestemunha ">
            <option></option>
        </select>
    </div>
</div>

Any suggestions on how to implement? NOTE : I cannot 'delete' options from the List, just hide in the other Select when selected.

javascript angularjs front-end

2 answers

0

For those reading here is the solution I found. It was not exactly as I wanted initially but it worked very well for what I wanted.

<div class="row">
    <div class="col-md-6">
        <label>
            Testemunha 1 :
        </label>
        <select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
              ng-options="obj as obj.pessoa.nome for obj in lstTestemunha">
              <option></option>
        </select>
    </div>

    <div class="col-md-6">
        <label>
            Testemunha 2 :
        </label>
        <select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha2" ng-disabled="!notificacaoOrientativa.testemunha1"
                            ng-options="obj as obj.pessoa.nome for obj in lstTestemunha | filter: {pessoa:{ id: '!' + notificacaoOrientativa.testemunha1.pessoa.id }}">
            <option></option>
        </select>
    </div>
</div>

0

You can set an ngChange for when the value of the first select is changed.

And in the controller you create the ng-change function to list in the second select.

  <select select-normal data-placeholder="..." ng-model="notificacaoOrientativa.testemunha1"
                        ng-options="obj as obj.pessoa.nome for obj in lstTestemunha" ng-change="CarregarSegundoSelect(obj)>
                    <option></option>
                </select>

  • It is not possible to do so suggested, because we have users who will certainly select Select 2 first. But thanks for the suggestion friend

  • but you could do ng-change in the two selects friend, I do not say to delete the record but just not show, because the user will be able to just choose a record right? then vc recreates the list without this record (only for display). and does it for the two selects.

  • makes sense, I will implement and place here the result

  • I solved the problem in a slightly different way, but thank you for the suggestion my brother

Browser other questions tagged javascript angularjs front-end

You are not signed in. Login or sign up in order to post.