Ng-repeat with pre-selected value

2

I'm building% complete%, and at the time of editing, I'm having a problem with CRUD . To save, I have a form with a ng-repeat and select that contains the functions that a collaborator can have (Coordinator, supervisor, teacher, etc). So far so good, it saves everything in the bank, with the id of the function. But at the time of editing, it fills this form with all the information, minus the ng-repeat with the select , which is "empty". I need to leave ng-repeat with the pre-selected value with the value of the id that comes from the bank, but I'm not getting it.

This is my select with select

 <div  ng-controller="funcoesController">
        <div class="form-group error">
            <label for="inputFuncao" class="col-sm-3 control-label"> Função </label>
                
            <div class="col-sm-9">
                <select name="funcao" ng-model="colaborador.funcao_id" ng-required="true">
                    <option ng-repeat="f in tbfuncao" value="{{f.id}}">
                      {{f.descricao}}
                    </option>
                </select>
            </div>
            <span class="help-inline" 
            ng-show="frmColaboradores.funcao.$invalid && frmColaboradores.funcao.$touched">
            Função do colaborador é obrigatória </span>
        </div>  
    </div>     

I do not know what code I should put here, if I need more, just ask ... Thanks in advance for your help.

    
asked by anonymous 07.09.2016 / 05:23

1 answer

1

This for best practices you have to use ng-options in place of ng-repeat within each select field. To select a field when returning from base you have to have the same property set in ng-model 'contributor.funcao_id'

Example ng-init="collaborator.funcao_id = 1" will filter the first item

I hope I have helped

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><body><divng-app='myApp'><divng-controller="funcoesController" class="form-group error">
            <label for="inputFuncao" class="col-sm-3 control-label"> Função </label>

            <div class="col-sm-9">
                <select name="funcao" ng-model="colaborador.funcao_id"  ng-required="true" 
                ng-options="f.id as f.descricao for f in tbfuncao">
                 <option value="">Selecione ... </option>
                </select>
            </div>
            <span ng-init="colaborador.funcao_id = 1" class="help-inline" 
            ng-show="frmColaboradores.funcao.$invalid && frmColaboradores.funcao.$touched">
            Função do colaborador é obrigatória </span>
        </div>  
 </div>  

 <script>
var app = angular.module('myApp', []);
    app.controller('funcoesController', function($scope) {      

        $scope.tbfuncao = [
        { id:1, descricao: 'teste 1'},
        {id:2, descricao: 'teste 2'},
        {id:3, descricao: 'teste 3'},
        {id:4, descricao: 'teste 4'}
        ];  

    });
</script>

</body>
    
08.09.2016 / 22:41