2015-04-02 18 views
9

Mam problem z wyświetlaniem wybranej wartości w kanciastym menu rozwijanym. działa gdy daję takLista rozwijana AngularJS nie pokazuje wybranej wartości

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

nie działa, jeśli dam bezpośrednio tej wartości

$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

rozwiązanie:

Dziękuję Samir-das. Naprawiłem zgodnie z twoją sugestią.

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

Odpowiedz

6

No bo

$scope.items[1] i { name: 'two', age: 27 } jest zupełnie inna sprawa.

{ name: 'two', age: 27 } to zupełnie inny obiekt natomiast $scope.items[1] jest częścią obiektu $scope.items

Kiedy można umieścić coś w szablonie za pomocą {{}} kątowa dodać go na swojej liście strażnika.

TAK, gdy kątowe umieścił go na liście obserwacyjnej, był to obiekt (tj. { name: 'two', age: 27 }), który jest inny niż $scope.items.

selectedItem jest dołączony do obiektu ustawionego w kontrolerze. Podsumowując while brudnej sprawdzenia, kątową wola sprawdza selectedItem przeciwko { name: 'two', age: 27 } nie przeciwko $scope.items

nadzieję, że rozumiesz o co mi chodzi

+0

Czy masz jakiś sposób aby to naprawić? –

+2

Będziesz musiał użyć tego samego obiektu. Możesz najpierw wyszukać element, który chcesz uruchomić, a następnie przypisać znaleziony element – Samir

1

To nie kątowym Funkcja/problem, jest to konsekwencja tego, jak obiekt równość działa JavaScript. This article wykonuje dość dobrą robotę wyjaśniając, co dzieje się w dość zwięzły sposób i podaje kilka przykładów. Sprawdź źródło lodash's isEqual method (ostatecznie zajmiesz się definicją baseIsEqualDeep), aby zobaczyć, jak to, co próbujesz osiągnąć, można zrobić w czystym JS.

W każdym razie, ja nie sądzę, że istnieje prosty sposób aby to osiągnąć w kątowa, trzeba by ponownie pisać tak ng-options prace i pewnie nie chce iść tam ...

1

W kanciastych tablicach i obiektach są przekazywane przez odniesienie, podczas gdy łańcuchy, liczby i wartości logiczne są przekazywane według wartości. Tak więc interpretacje kątowe $scope.items[1] i { name: 'two', age: 27 } jako dwa różne obiekty. Właśnie dlatego twoje powiązanie nie powiedzie się, gdy wykonasz numer $scope.selectedItem = { name: 'two', age: 27 }; i znajdziesz go w "$ scope.items".

6

Jak wyjaśniono w innych odpowiedziach, podczas gdy dwa obiekty mogą mieć te same właściwości i wartości, są to dwa różne obiekty, więc kątowe nie uważa ich za równe.

Można jednak użyć wyrażenia w ng-optionstrack by określić właściwość, która zadecyduje równości:

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

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

Powiązane problemy