Ng-repeat with preselected value

Asked

Viewed 268 times

2

I’m building a CRUD complete, and when it comes time to edit, I have a problem with ng-repeat. To save, I have a form with a select and ng-repeat which contains the functions a collaborator may have (Coordinator, supervisor, teacher, etc.). So far so good, he saves in the bank everything straight, with the function id. But when editing, he fills in this form with all the information, except the select with the ng-repeat, which is "empty". I must leave select with the preselected value with the id value that comes from the bank, but I’m not getting.

This is my select with ng-repeat 

 <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 don’t know what else to put in here, in case I need more, just ask... Thanks for your help.

javascript html angularjs

1 answer

1


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

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

I hope I’ve helped 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>


 <div  ng-app='myApp' >
        <div  ng-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>

Browser other questions tagged javascript html angularjs

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