Select with angular loading blank value

Question

Select with angular loading blank value

Asked 9 years ago

Viewed 3,335 times

5

Well I want select to start with a selected value, this value already comes in my ng-model:

   <label class="format">SELECIONE:</label>
        <span class="format">
            <select   name="grupo" id="grupo"  data-ng-model="vm.grupoSelecionado.codigo">
                <option  data-ng-repeat="grupo in vm.listaGrupos" value="{{ grupo.codigo }}">{{grupo.descricao}}</option>
            </select>
        </span>

ie, my vm.group.codigo already comes my selected value, the same is inside the list of ng-repeat, how to start it loaded?

2 answers

3

Utilize ng-options as source of your data. When present in an element SELECT, it allows the default selection of the value identified by the key term track by.

In the following example I used the same object present in your question (vm) to demonstrate this behaviour:

function SampleController($scope) {
  $scope.vm = {
    listaGrupos: [
      {codigo: 'a', descricao: 'Grupo A'},
      {codigo: 'b', descricao: 'Grupo B'},
    ],
    grupoSelecionado: {grupo: {codigo: 'b'}} 
  };
}

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  </head>
  <body>
    <div ng-controller="SampleController">

      <label class="format">SELECIONE:</label>
      <span class="format">
        <select name="grupo" id="grupo"
                data-ng-model="vm.grupoSelecionado.grupo"
                ng-options="g.descricao for g in vm.listaGrupos track by g.codigo"
                >
        </select>
      </span>
      <br/>
      Selecionado: {{ vm.grupoSelecionado }}

    </div>
  </body>
</html>

When executing this code, note that the SELECT element is initialized with the preselected B group.

I did it this way, and it keeps coming blank the selected.

– War Lock

2015/10/06 at 14:25
@Warlock The above example works for you?

– OnoSendai

2015/10/06 at 14:31
Logically yes, but it doesn’t work.

– War Lock

2015/10/06 at 14:50
vm.groupSelected. has an object, group, so it’s like, vm.groupSelecturer.group changes something? I had forgotten to post here

– War Lock

2015/10/06 at 14:51
@Warlock this information was not present in the original question - yes, it changes; I adjusted the example.

– OnoSendai

2015/10/06 at 14:54
1

It worked, the problem was in the backend that was coming the wrong code. (other than what was in select) then he would never find, but his example saved me. VLW

– War Lock

2015/10/06 at 16:14

Show 1 more comment

Browser other questions tagged angularjs

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

by Cezar • **816** points · Answer 1 · 2015-10-06T13:44:26+00:00

I believe something is missing in your javascript (angular) to work.

Example:

var app = angular.module("app", []);
app.controller("ctrl", function($scope)
{
    $scope.id = {'id': 1};
    $scope.list = [
        {'id': 1, 'name': 'comunidade'},
        {'id': 2, 'name': 'csharp'}
    ];
});

In this javascript (angular) code I defined that the id that’s where my select must select.

In my HTML it would be in this format:

<div ng-app="app" ng-controller="ctrl">
   <select id="select1" name="select1" ng-model="id" ng-options="s.name for s in list track by s.id">
   </select>
<div>

var app = angular.module("app", []);
app.controller("ctrl", function($scope)
{
    $scope.id = {'id': 1};
    $scope.list = [
        {'id': 1, 'name': 'comunidade'},
        {'id': 2, 'name': 'csharp'}
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select id="select1" name="select1" ng-model="id" ng-options="s.name for s in list track by s.id">
</select>
<div>