Select an option dynamically angular


Hello everyone, thanks for your response and the time dedicated.

I have another doubt it is possible with angular to put a selected option dynamically because I have to achieve that. In the html code I have this where keysSecurityTypes is an array that is in a controller with the values I want to show. But the thing is that I have to initialize the options with a default value that can vary according to what comes from a database that corresponds to the same values of keysSecurityTypes but only one value according to what comes from the database I have to show the values of the keysSecurityTypes array and also put in the option a default value that can change by placing the select would not work because it would always be for the same element and not dynamically with angular. That value is only loaded once when the options are shown but since it depends on the database if that value changes, you should change the value in the option.

in the controller

public keysSecurityTypes : Array<string> = new Array("WPA2", "WPA", "WPA/WPA2");
public valorSeleccionadoPorDefecto : string; // este valor puede cambiar y indica cual es el elemento del array que debe aparecer seleccionado en el option del html


<select ng-model="securityType" ng change="wifi.selectedSecurityType(securityType)">
               <option ng-repeat="types in wifi.keysSecurityTypes">{{types}}</option>

Thanks again

asked by Reynier Téllez 22.09.2016 в 20:01

2 answers

<div ng-app="" ng-init="keysSecurityTypes=[{is:'false',name:'WPA'},{is:'false', name: 'WPA2'},{is: 'false', name: 'WPA/WPA2'}]">
    <select ng-model="securityType" ng-init="securityType = 'true'">
        <option ng-repeat="option in keysSecurityTypes" value="{{}}">{{}}</option>

You have to change keysSecurityTypes to an object such as that (I do it in JS for better understanding)

var keysSecurity = [
    {is: 'true', name: 'WPA'},
    {is: 'false', name: 'WPA2'},
    {is: 'false', name: 'WPA/WPA2'},
answered by 23.09.2016 в 04:44

You should not use ng-repeat to make the options of your select , use ng-options that is designed for that

angular.module('app', [])
  .controller('WifiCtrl', function($scope, $timeout) {
    $scope.wifi = {
      keysSecurityTypes: ['WPA2', 'WPA', 'WPA/WPA2'],
      selected: ''

    $timeout(function() {
      $scope.wifi.selected = 'WPA/WPA2';
    }, 3000);
<script src=""></script>
<div ng-app="app" ng-controller="WifiCtrl">
  <p>Simulando llamada ajax</p>
  <p>Espere unos segundos para que el valor se actualice</p>
  <select ng-options="type for type in wifi.keysSecurityTypes" ng-model="wifi.selected"></select>

In the example, the selected value is updated after a few seconds, just as if it had arrived from the server and to update the selected value, I only had to change the value of ng-model . In addition ng-repeat creates you a new $scope for each element option so it has worse performance than ng-options to create elements of a select.

answered by 26.09.2016 в 16:02