como llenar un combo hecho directiva, desde AngularJS (Angular 1)

publicado por: Anonymous

Quiero en un formulario dinámico poder establecerle un valor a un Combo (Select), sinembargo cuando los controles dinámicos son renderizados, el combo, el cual es una directiva, no precarga el valor que se le envía.

Me gustaría saber como poder resolver este tema. El código está abajo y a referencio también el ejemplo en Plunk. Al cargar la pagina o al agregar nuevas filas, el combo no deja seleccionado el valor que viene en el JSON.

https://plnkr.co/edit/g9FGXJGzGEQ38fE6czRN?p=preview

<!DOCTYPE HTML>
<html ng-app="shanidkvApp">
<head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <title>Tittle</title>

</head>
<body>
    <div class="container">
        <div class="row">
            <h3>AngularJS Dynamic Form Fields</h3>
            <hr />
            <div ng-app="angularjs-starter" ng-controller="MainCtrl">
                <fieldset data-ng-repeat="choice in choices">
                    <select ng-model="choice.mobile">
                        <option value="Mobile" >Mobile</option>
                        <option value="Office" >Office</option>
                        <option value="Home" >Home</option> 
                    </select>

                    <sel caremonda="choice.res" opciones="paises"></sel>
                    <input type="text"  value="{{choice.res}}">
                    <input type="{{choice.type}}" ng-model="choice.name" name="" placeholder="Enter mobile number">
                    <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
                </fieldset>
                <button class="addfields" ng-click="addNewChoice()">Add fields</button>
                <button class="addfields" ng-click="mostrar()">Mostrar</button>

                <div id="choicesDisplay">
                    {{ choices }}
                </div>

                <select ng-model="multipleSelect">
                    <option value="var1">Option 1</option>
                    <option value="var2">Option 2</option>
                    <option value="var3">Option 3</option>
                </select><br>
                <tt>multipleSelect = {{multipleSelect}}</tt><br />
            </div>
        </div>
    </div>

</body>
</html>

solución

Utiliza la directiva ngSelected en las opciones del select, esta directiva se guía por una expresión para marcar una opción como selected:

<option ng-repeat="facility in countries" value="{{facility.value}}" ng-selected="facility.value == leValor">{{facility.name}}</option>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *