Il menu a discesa AngularJS non mostra il valore selezionato

Problema di fronte al problema nella visualizzazione del valore selezionato nel menu a discesa angolare. funziona quando do come questoIl menu a discesa AngularJS non mostra il valore selezionato

$scope.selectedItem = $scope.items[1];

non funziona, se mi danno direttamente che valore

$scope.selectedItem = { name: 'two', age: 27 };

HTML:

<html ng-app="app"> 
    <body> 
    <div ng-controller="Test"> 
     <select ng-model="selectedItem" ng-options="item.name for item in items"> 
     </select> 
    </div> 
    </body> 
</html>

JS:

var app = angular.module('app',[]); 
app.controller('Test',function($scope){ 
    $scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }]; 
    $scope.selectedItem = $scope.items[1]; 
});

CODEPEN: http://codepen.io/anon/pen/zxXpmR

SOLUZIONE:

Grazie Samir-das. Ho risolto secondo il tuo suggerimento.

var choosen_value = { name: 'two', age: 27 }; 
angular.forEach($scope.items, function(item){ 
    if(angular.equals(choosen_value, item)){ 
    $scope.selectedItem = item; 
    } 
});

fonte

2015-04-02 Raj Adroit

Bene, perché

$scope.items[1] e { name: 'two', age: 27 } è cosa totalmente diversa.

{ name: 'two', age: 27 } è un oggetto completamente diverso mentre $scope.items[1] fa parte dell'oggetto $scope.items

Quando si mette qualcosa nel modello utilizzando {{}}, angolare aggiungerlo nella sua lista watcher.

COSÌ quando angolare lo ha inserito nell'elenco di controllo, era un oggetto (ad esempio { name: 'two', age: 27 }) diverso da $scope.items.

selectedItem viene allegato all'oggetto impostato nel controller. In sintesi, mentre il check sporca, volontà angolare controlla selectedItem contro { name: 'two', age: 27 } non contro $scope.items

Spero che tu capisca cosa intendo

fonte

2015-04-02 07:48:00 Samir

Avete qualche modo per risolvere questo problema? –

Dovrai utilizzare lo stesso oggetto. È possibile cercare prima l'oggetto con il quale si desidera iniziare, quindi assegnare l'elemento trovato – Samir

Questo è non un angolare funzione/problema, è una conseguenza di come oggetto l'uguaglianza funziona Javascript. This article fa un buon lavoro nello spiegare cosa sta succedendo in modo piuttosto conciso e fornisce alcuni esempi. Controlla la fonte di lodash's isEqual method (ti porterà alla definizione di baseIsEqualDeep alla fine) per vedere come ciò che stai cercando di ottenere può essere fatto in puro JS.

In ogni caso, non credo che ci sia un modo semplice per raggiungere questo obiettivo in angolare, si dovrà riscrivere il modo ng-options opere e che probabilmente non si vuole andare lì ...

fonte

2015-04-02 07:56:57

In angolare, le matrici e gli oggetti vengono passati per riferimento mentre stringhe, numeri e valori booleani vengono passati per valore. Quindi, interpreti angolari $scope.items[1] e { name: 'two', age: 27 } come due oggetti diversi. Questo è il motivo per cui l'associazione non riesce quando lo si fa $scope.selectedItem = { name: 'two', age: 27 }; direttamente e lo si trova in "$ scope.items".

fonte

2015-04-02 08:00:28 Himanshu

Come spiegato nelle altre risposte, mentre i due oggetti possono avere le stesse proprietà e valori, sono due oggetti diversi così angolari che non li considerano uguali.

È possibile comunque utilizzare il track by espressione in ng-options per specificare una proprietà che deciderà l'uguaglianza:

ng-options="item.name for item in items track by item.name"

http://codepen.io/anon/pen/WbWMrp

fonte

2015-04-02 08:44:38 noj

Il menu a discesa AngularJS non mostra il valore selezionato

risposta

Problemi correlati