Compare 2 variables in a select with Angular

Asked

Viewed 585 times

0

Hello, I have an array of objects that I am pulling from the database and playing in a Select HTML, only I am also passing another variable and would like to compare this variable with the values of the BD array and if they are equal set to Selected option. I’m using angular. Below is the code I’m using:

<div class="col-xs-12 input_formulario" ng-init="vm.tipoSeguro()">
    <select name="setor_destino" required="" ng-model="user.tipoSeguro" >
        <option value="">Nome do seguro</option>
        <option ng-repeat="seguros in vm.mostraTipoSeguro track by seguros.id" value="{{seguros.nome}}">{{seguros.nome}}</option> 
    </select>
</div>

The ng-model I have in select is to send the selected value to the function in the controller that sends the form by email.

Follows HTML made with the answer Gabriel Câmara:

<select name="setor_destino" required="" ng-model="user.tipoSeguro" >
    <option value="">Nome do seguro</option>
    <option ng-repeat="seguros in vm.mostraTipoSeguro track by seguros.id" value="{{seguros.nome}}" ng-selected="seguros.id == vm.cookie">{{seguros.nome}}</option> 
</select>

And my controller:

vm.tipoSeguro = function () {
    SimulacaoService.listaTipoSeguro().then(function (response) {
        if (response.data != 0) {
            vm.mostraTipoSeguro = response.data;
            vm.cookie = $.cookie("nome_seguro");
            $.removeCookie("nome_seguro");
        } else {
            vm.mostraTipoSeguro = '';
        }
    }, function (error) {
        console.error(error);
    });
}
html angularjs html-option

  • Try to foreach the controller and assemble a new list, you can create a new attribute checked in this new list, and everyone who is equal has this value true, and the rest has the value false

  • Another repetition would cause performance problems, since the angular checks all variables in the $Digest cycle, imagine if the value of any of the elements within the structure mostraTipoSeguro If there was a change, this would cause all the Watchers to be activated in the next cycle and these would fire more Watchers until there were no more changes. Now within each cycle of that, there would be another forEach being executed. For a small application maybe the cost is not high and almost not noticed, but in a large application would make a difference, especially in cell phones.

2 answers

1

Hello, you can do this by using the ngSelected directive.
In that Jsfiddle I created an example for you to check

Editing

I made an adjustment with the ngCookies module of Angularjs.
I imagine when you assign the $.cookies, is a jQuery object, in which case you would be pointing to the reference and, I don’t know what jQuery does underneath the scenes when you add/remove/change a cookie, but this may be the reason, because you after setting the value, remove the cookie.

  • Hello, I did exactly as you showed, but for me it does not show the Selected, I will edit my question to show how I did.

  • Please see the edit. I changed the Jsfiddle link

  • I am not using corner cookies, I am using jquery cookies even. In my case, I save the cookie to a variable before deleting it, and I can print this cookie on the screen, I just can’t do the verification.

  • This cookie returns as a String or as an integer?

  • I put to return an entire, in case the insurance ID, but I can put to return the name, whatever

  • Um, it may be that the moment you get the answer from Premomise, your scope is not updated, as it is asynchronous. Can you please try applying a $apply after the line vm.cookie = $.cookie...

  • i have never used this apply, but it would be like this, which it uses: vm.cookie = $.cookie("safeName"); vm. $apply(); ? because it is giving error, saying that it is not a function

  • I took the test here and I don’t think that’s the problem. The $apply is a function of the scope ($scope ou $rootScope). It serves to indicate to Angular that something has changed outside the scope. An example would be if you used a setTimeout or a native javascript function, which would eventually change a variable and Angular would not know.

  • Maybe that’s why I’m not using the main controller? I’m using the controller from another module

  • But the point is that I can send the value to HTML, so I believe the problem is in the way that select is being done

  • Let’s go continue this discussion in chat.

Show 6 more comments

0


For the select to be selected it is necessary that the model has the same value as the value, so the angular will automatically identify that the values are equal and the option will be selected by default.

Browser other questions tagged html angularjs html-option

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