Select an option dynamically angular

Question

Select an option dynamically angular

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

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

HTML

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

Thanks again

angularjs

asked by Reynier Téllez 22.09.2016 в 20:01

source

2 answers

How to make a hello world in assembler Nasm in windows? Problem when merging two objects in JavaScript

score 1 · Answer 1

<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.is}}">{{option.name}}</option>
    </select>
</div>

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'},
];

score 1 · Answer 2

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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></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>
</div>

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.