Использование angular.js для установки выбранного из динамического значения в файлах JSON

0

Простите меня, если это вопрос новичков. Я очень новичок в Angular.

Я везде искал это, и, хотя на вопрос о настройке параметра по умолчанию задано много вопросов, я не нашел того, где выбранный параметр динамически задается из значений в файле JSON.

Мой контроллер выглядит так:

peopleControllers.controller('PeopleListCtrl', ['$scope','PeopleList',
function($scope, PeopleList) {
    $scope.id = 'id';
    $scope.people = PeopleList.query();
    $scope.orderProp = 'name';
    $scope.comments = 'comments';
    $scope.department = 'department';
    $scope.departmentList = [
        {id : 1, name : "HR" },
        {id : 2, name : "Accounting"},
        {id : 3, name : "Marketing"}
    ];
}]);

PeopleList - это ресурс $, который поступает из файла JSON, отформатированного следующим образом:

[
{
    "id": "johnasmith",  
    "name": "John A. Smith",
    "department": "1",
    "comments": "Good worker"
},
{
    "id": "sarahqpublic",  
    "name": "Sarah Q. Public",
    "department": "2",
    "comments": "New hire"
},
{
    "id": "janedoe",  
    "name": "Jane Doe",
    "department": "3",
    "comments": "Good resource for information"
}
]
...

И в HTML, у меня есть это:

ul class="people">
    <li ng-repeat="person in people | filter:query | orderBy:orderProp">
        <a href="#/people/{{people.id}}"><h3>{{people.name}}</h3></a>
        <p>{{people.comments}}</p>
        <select ng-model="department" ng-options="departmentList.name for department in departmentList track by department.id">
        </select>
    </li>
</ul>

Оператор select заполняет всю нужную информацию из отделаList, но его выбранное значение заканчивается пустым. Если я установил статическое значение для $ scope.department, например $scope.department = $scope.departmentList[1]; (для "Бухгалтерский учет") он работает отлично. Но, похоже, он не может вывести значение отдела из файла JSON.

Я знаю, что мне не хватает чего-то простого и очевидного. Там должны быть другие люди, которые уже спросили и ответили на этот вопрос, поэтому я сожалею, если это окажется дубликатом. Но сейчас я действительно смущен.

  • 0
    Должно быть ng-model="person.department"
  • 0
    Кажется, не работает. В любом случае, выборка будет заполнена правильно, но выбранное значение будет пустым.
Показать ещё 3 комментария
Теги:

2 ответа

1
Лучший ответ

Из документов

выберите as и track by Не используйте select as и track в одном выражении. Они не предназначены для совместной работы.

Кроме того, как @Chrillewoodz предложил вам преобразовать string в number для id отдела

наценка

<select ng-model="person.department" 
   ng-options="department.id as department.name for department in departmentList">
</select>

Demo Plunkr

  • 0
    Я люблю вас! Вот и все! Спасибо, спасибо, миллион раз спасибо!
  • 0
    @GoodDamon рад помочь вам .. Спасибо :)
1

Файл JSON содержит только строки, которые заставляют вас искать значение "3" в массиве вместо выбора [3]. Поэтому измените свой JSON на department: 3 вместо department: "3" и так далее.

Как это:

{
    "id": "johnasmith",  
    "name": "John A. Smith",
    "department": 1,
    "comments": "Good worker"
},
{
    "id": "sarahqpublic",  
    "name": "Sarah Q. Public",
    "department": 2,
    "comments": "New hire"
},
{
    "id": "janedoe",  
    "name": "Jane Doe",
    "department": 3,
    "comments": "Good resource for information"
}

Также вам нужно select ng-model="person.department".

  • 0
    Я внес изменения в свой JSON-файл и переключил ng-модель, но у меня все еще остается пустой выбор по умолчанию.
  • 0
    @Pankaj разобрался с недостающей частью, но это помогло мне пройти путь, так что спасибо вам тоже!
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню