AngularJS: mise à Jour ngModel la propriété lorsque vous sélectionnez les options de changement

Il est facile à utiliser Angulaire de la liaison de données pour forcer un JavaScript propriété de changer lorsqu'un utilisateur modifie l'élément sélectionné dans un menu. Cependant, je ne peux pas comprendre comment la force de données propriété liée à changer lorsque le modèle utilisé pour générer un menu change.

Ce violon illustre le comportement: http://jsfiddle.net/2pHGX/. Changer le modèle en cliquant sur changeOptions provoque l'sélectionnez options pour modifier correctement. Mais les données liées à la propriété ne change pas immédiatement, il ne change que lorsque l'utilisateur sélectionne une autre option de menu.

<body ng-app ng-controller="bodyCtrl">
    <select ng-model="selection" ng-options="option for option in options">
    </select>
    <button ng-click="changeOptions()">changeOptions</button>
    <br>
    selection: {{selection}}
</body>

function bodyCtrl($scope) {
    $scope.options = [10, 20, 30];
    $scope.changeOptions = function() {
        $scope.options = [11, 22, 33];
    };
}

Je veux que les données de propriété liée à la mise à jour lorsque l'option sélectionnée change pour une raison, soit parce que l'utilisateur a choisi une option différente ou parce que le modèle, et donc les options, changé. Je peux faire ce travail avec $watch, mais je ne comprends pas pourquoi la liaison de données ne suffit pas. Quel est le meilleur moyen pour accomplir cette Angulaire? Suis-je un malentendu quelque chose de fondamental sur la liaison de données?

vous voulez garder le même indice?
Mes attentes naïves, c'est que, lorsque les options pour une données sélectionnez modifier, le pré-changer la valeur va continuer à être sélectionnée si elle s'affiche partout dans les nouvelles options indépendamment de l'index, et un vide option sera sélectionnée autrement
Je crois que je vois ce que tu veux dire. Vous vous attendez à {{selection}} de changer de <emptystring> lorsque le changeOptions() est déclenché. Je pense que je m'attends à la même chose. Intéressant...
La définition de la ng-model crée une étendue variable appelée "sélection". Lorsque vous modifiez le ng-options, vous n'avez pas déclencher le changement qui permettrait de mettre à jour la "sélection". C'est un distinctes et sans rapport avec la variable à ce point. J'aime davin réponse ci-dessous, parce qu'il traite de façon appropriée DOM événements et les données comme des entités indépendantes.

OriginalL'auteur Chris | 2013-07-08

  1. 2

    Je ne suis pas sûr exactement le comportement que vous voulez, mais vous pouvez toujours regarder les options et, par conséquent, sur le changement effectuer une action (JSFiddle):

    function bodyCtrl($scope) {
    $scope.selection = 0;
    $scope.options = [ 10, 20, 30];
    $scope.changeOptions = function() {
        $scope.options = [11, 22, 33];
    };

    $scope.$watch('options', function() {
        $scope.selection = 0;
    });
}

    Espère que cette aide.

    Je pense que l'OP est désireux de savoir POURQUOI le changement n'est pas automatique. Il semblerait que le modèle devrait changer avec le changement dans les options, car ils sont apparemment liés ensemble.
    Comment sont-ils liés? L'action de sélection de la liste déroulante, lie de retour à la valeur sélectionnée. En modifiant les options seulement changé ce que la liste est lié.
    Le comportement que j'attendais est pour les données liées à la propriété de toujours refléter l'option actuellement sélectionnée. Cela ne se produit pas dans certaines circonstances, par exemple lorsque les options sont modifiées en raison de changement de modèle. Ne fait que préciser ma question?
    En modifiant les options, vous ne modifiez pas la valeur de modèle (de selection).
    Juste pour préciser, quand vous déclarer l'attribut ng-model="selection", sous le capot, angulaire ajoute un nouveau champ d'application champ nommé selection. Donc, il n'est pas implicite lié connexion. Sur la sélection de la liste, le selection champ est mis à jour.

    OriginalL'auteur Davin Tryon

  2. 5

    Si vous lier directement ng-model à une étendue variable, comme ci-dessous, le champ d'application variable d'une certaine manière ne sera pas mis à jour. 

    <select ng-model="selection" ng-options="option for option in options">

    Au lieu de cela, définir un modèle d'affichage dans votre portée et lier ng-modèle, un champ de vue du modèle le modèle de vue champ sera mis à jour.

    <select ng-model="viewmodel.selection" ng-options="option for option in options">

    Dans votre contrôleur, vous devriez faire ceci:

    app.controller('SomeCtrl', ['$scope'
    function($scope)
    {
        $scope.viewmodel = {};
    });
    Cloué! Merci mec, aucune idée de ce qui se passe ici? Normalement je peux lier à des modèles directement dans le champ d'application
    Ne sais pas la raison mais... Dans de nombreuses situations, je dois mettre les variables dans un modèle d'affichage pour les avoir mis à jour.
    Merci. Vraiment bizarre car j'ai une assez grande application qui s'exécute sans un modèle de vue jusqu'à maintenant 🙁

    OriginalL'auteur Yang Zhang