how to fill a directive fact combo, from angular

2

I want in a dynamic form to be able to set a value to a Combo (Select), however when the dynamic controls are rendered, the combo, which is a directive, does not preload the value that is sent to it.

I would like to know how to resolve this issue. The code is below and also reference the example in Plunk . When loading the page or adding new rows, the combo does not leave the value that comes in the JSON selected.

link

<!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>
    
asked by Oscar Alonso Rueda Ruiz 23.02.2017 в 00:38
source

1 answer

1

Use the ngSelected directive in the select options, this directive is guided by an expression to mark an option as selected :

<option ng-repeat="facility in countries" value="{{facility.value}}" ng-selected="facility.value == leValor">{{facility.name}}</option>
    
answered by 26.02.2017 / 02:33
source