简体   繁体   中英

selected option on angularjs dropdown

something is breaking my head.

I'm using angularjs on a web app and I built a table with BD results and each row has a select item witch is loaded with a model but, I don't know how to do to mark a specific option depending of result item.

My code:

var ctrlScope = $scope;
ctrlScope.antenas = [];

// Model to select
ctrlScope.motivos = [ 
    {id:0,descripcion:"--  Seleccion una opcion  --"},       
    {id:1,descripcion:"Corte de Luz"},
    {id:2,descripcion:"Falla de proveedor"},
    {id:3,descripcion:"Mantenimiento"},
    {id:4,descripcion:"Micro corte"},
    {id:5,descripcion:"Otro"},
    {id:6,descripcion:"Por definir"}
]


// Method to load data
call_url = app_root+'Auditoria/reporte';
    var dsd = $('#desde').val();
    var has = $('#hasta').val();

    $http.post(call_url,{desde:dsd, hasta:has})
    .then(function(resp){
        var data = resp.data
        for(var item in data){
            ctrlScope.antenas.push({
                "ip": data[item].ip,
                "nombre":data[item].nombre,
                "nodo": data[item].nodo,
                "fecha": data[item].fecha,
                "motivo": data[item].motivo
            });
        }//for
    }) //then

HTML:

<tr ng-repeat="ant in antenas">
        <td>{{ ant.ip }}</td>
        <td>{{ ant.nombre }}</td>
        <td>{{ ant.nodo }}</td>
        <td>{{ ant.fecha }}</td>
        <td>
            <select class="form-control">
                <option 
                    ng-repeat="motiv in motivos" 
                    ng-selected="{{ ant.motivo }}" 
                    value="{{ motiv.id }}">{{ motiv.descripcion }}
                </option>
                </select>
            </td>
        </tr>

I was trying with ng-selected but doesn't work.

I just assume that ant.motivo should be equal with motiv.id . If that is the case your option tag should look like that:

<option ng-repeat="motiv in motivos"
        ng-value="motiv.id"
        ng-selected="motiv.id == ant.motivo"
        ng-bind="motiv.descripcion"></option>

ng-selected expects a expression which will be true or false. Although you can use ng-value and ng-bind .

you must use ngOptions try this

<select ng-model="ant.motivo"
        ng-options="motiv.id as motiv.descripcion for motiv in motivos">
</select> 

watch here https://plnkr.co/edit/8ZhWqRy12BwCGXxEeI5u?p=preview

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM