Initialiser ng-options à la valeur du modèle

J'ai besoin de pré-remplir un élément <select> avec certaines options de la portée et je voudrais celui dont la valeur est liée au modèle à sélectionner initialement.Initialiser ng-options à la valeur du modèle

Le problème est que la valeur du modèle n'est pas sélectionnée et qu'un élément vide est créé et sélectionné à la place.

JSON Modèle

var fruits = { 
    "0":"apple", 
    "1":"pear", 
    "2":"banana" 
}

Contrôleur

$scope.items = fruits; 
$scope.myfruit = 1; // also tried "1"

Markup Modèle:

<select class='form-control' name="fruit" 
    ng-model="myfruit"    
    ng-options="key as val for (key, val) in items" >      
</select>

Le menu déroulant me nu rend avec toutes les valeurs présentes et met à jour le modèle avec les clés (comme prévu), mais le premier élément est un élément vide qui est sélectionné.

Cependant, une fois qu'une option est choisie, l'option vide disparaît.

J'ai aussi essayé d'écrire en utilisant le balisage ng-repeat avec des résultats identiques:

<select class='form-control' name="fruit" 
    ng-model="myfruit" > 
    <option ng-repeat="(k, val) in items" value="{{k}}">{{val}}</option>       
</select>

Comment puis-je obtenir la valeur représentée dans le modèle à être sélectionné lorsque initialisé?

Source

2017-01-08 yevg

Il travaille pour moi: '$ scope.myfruit = « 1'' –

ah oui. ça a marché. Je suppose que je vais devoir convertir mon modèle en une chaîne – yevg

votre valeur d'option est une chaîne

cela devrait fonctionner.

$scope.myfruit = "1";

Vérifiez l'exemple ci-dessous travailler

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 

 
    var fruits = { 
 
    "0": "apple", 
 
    "1": "pear", 
 
    "2": "banana" 
 
    } 
 

 
    $scope.items = fruits; 
 
    $scope.myfruit = "1"; 
 

 

 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    
 
    <select class='form-control capitalize' name="cost" 
 
    ng-model="myfruit"    
 
    ng-options="key as val for (key, val) in items" >      
 
    </select> 
 
    
 
    
 
    </body> 
 

 
</html>

Source

2017-01-08 05:55:37 Deep

Initialiser ng-options à la valeur du modèle

Répondre

Questions connexes