pary klucz-wartość w opcjach ng

Potrzebuję tablicy asocjacyjnej jako źródła danych dla moich opcji select przy użyciu AngularJS.

Czy jest możliwe użycie takiej tablicy?

{
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
}

I weź coś takiego: 

<select>
    <option value="key1">val1</option>
    <option value="key2">val2</option>
    <option value="key3">val3</option>
    ...
</select>

Czytałem dokumenty , ale nie mogę zrozumieć, jak to osiągnąć.

Author: davioooh, 2014-02-12
Source

3 answers

Użycie ng-option: 

<select ng-model="blah" ng-options="key as value for (key , value) in data"></select>

Lub ng-repeat: 

<select>
    <option ng-repeat="(key, value) in data" value="{{key}}">{{value}}</option>
</select>

Dane w kontrolerze: 

$scope.data = {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
};
 145
Author: Chen-Tsu Lin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-08 13:36:04

Poniższy artykuł omawia różne sposoby, które można użyć ngOptions (zdecydowanie najjaśniejsze, najbardziej dokładne wyjaśnienie, jakie kiedykolwiek widziałem): http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

 18
Author: Markus Hay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-02 12:43:18

Odpowiedź przezChen-Tsu Lin podaje obie drogi dostępu do obiektów. Po prostu chcę dodać jeszcze kilka linijek -

Ponieważ dyrektywa ng-repeat powtarza blok kodu HTML dla każdego elementu w tablicy, może być używana do tworzenia opcji z listy rozwijanej, ale dyrektywa ng-options została stworzona specjalnie do wypełniania listy rozwijanej opcjami i ma co najmniej jedną ważną zaletę:

Listy rozwijane wykonane za pomocą ng-options pozwalają na obiekt, podczas gdy lista rozwijana z ng-repeat musi być ciągiem znaków.

Dodanie przykładu dla odniesienia:

ng-repeat : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_repeat_selected

ng-options: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_object

Aby uzyskać pełne odniesienie, udaj się na http://www.w3schools.com/angular/angular_select.asp

 2
Author: Janusz01,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:17:59