web-dev-qa-db-fra.com

AngularJS: Sélectionnez la liaison non bidirectionnelle avec le modèle

J'utilise une sélection pour afficher les noms des clients. Un utilisateur doit pouvoir sélectionner un client existant, qui mettra alors à jour la propriété scope:

Contrôleur

Initialisation du "premier choix". 

if($scope.clients.length > 0) $scope.existingClient = $scope.clients[0];

Voir

<select
    id='nm-existing-client-name'
    class='form-control  input-lg'
    ng-model='existingClient'
    ng-options="client.name for client in clients">
</select>

La propriété d'étendue existingClient ne change pas lorsque le menu de sélection change. Si aucune valeur n'est initialisée (la ligne de contrôleur ci-dessus est supprimée), la valeur de existingClient restera indéfinie.

Attacher un ng-change se déclenche lorsqu'une valeur change, mais le modèle lui-même ne se met pas à jour avec la nouvelle valeur.

J'utilise AngularJS v1.2.0-rc.3 .

javascriptangularjsangularjs-scope
45
Tyler Shaddix

Je pense que vous utilisez probablement une lunette enfant et que vous ne la connaissez pas. ng-if, ng-repeat, ng-switch et ng-include tous créent des étendues enfants. Les valeurs de votre portée sont héritées, mais si vous modifiez la valeur dans une portée enfant, elle définit une valeur sur la portée enfant et laisse la valeur héritée inchangée sur le parent. Essayez d'utiliser un objet à la place pour conserver vos valeurs et voir si cela le corrige. Comme vous ne définissez qu'une propriété sur un objet et non une valeur directement sur la portée, il utilisera l'objet hérité de la portée parent et mettra à jour la valeur.

$scope.data = {
    existingClient: $scope.clients.length > 0 ? $scope.clients[0] : undefined
};

Vue:

<select ng-model="data.existingClient" 
        ng-options="client.name for client in clients">
</select>

Vous pouvez utiliser extension AngularJS Batarang dans chrome pour vous aider à déboguer vos étendues.

123
Jason Goemaat

C'est également une solution pour conserver les paramètres dans votre objet $ scope:

manette:

$scope.scope = $scope;
$scope.clients = [];
$scope.existingClient = $scope.clients.length > 0 ? $scope.clients[0] : undefined;

vue:

<select ng-model="scope.existingClient" ng-options="client.name for client in clients"></select>
1
Christiaan