Select with angular loading blank value

Asked

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?

angularjs

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.

  • @Warlock The above example works for you?

  • Logically yes, but it doesn’t work.

  • vm.groupSelected. has an object, group, so it’s like, vm.groupSelecturer.group changes something? I had forgotten to post here

  • @Warlock this information was not present in the original question - yes, it changes; I adjusted the example.

  • 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

Show 1 more comment

2

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>

  • I didn’t understand ng-options, how would I get my code? what does this S mean?

  • my ,vm.group.codigo is already exactly the value I want of the object, because I am creating a function edit, then comes what was selected to edit in it. I want my select to start with what comes in vm.groupSelected.Description

  • ng-options is the responsible guy to tell your select that it has to load the items from list s is for him to know that name is text and id is the value of his select option

  • About vm.groupSelected it has the feature to position the select item by the object referring to {'id':1}! , was what I read on the angular site! and really worked

Browser other questions tagged angularjs

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