angularjs下拉列表中的选定选项

时间:2018-04-05 15:29:33

标签: javascript php angularjs

有些东西让我头晕目眩。

我在网络应用中使用angularjs并且我构建了一个包含BD结果的表格,每行都有一个选择项目,其中包含一个模型,但我不知道如何标记具体选项取决于结果项目。

我的代码:

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>

我尝试使用ng-selected但是没有工作。

2 个答案:

答案 0 :(得分:0)

我只是假设ant.motivo应与motiv.id相等。如果是这种情况,您的选项标签应如下所示:

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

ng-selected需要一个真或假的表达式。虽然您可以使用ng-valueng-bind

答案 1 :(得分:0)

你必须使用ngOptions试试这个

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

在这里观看 https://plnkr.co/edit/8ZhWqRy12BwCGXxEeI5u?p=preview