Как отобразить данные, подгруженные через ajax в Angular?

Question

[nurise]

Есть такой html

<label for="country">Страна:{{countries.length}}</label>
    <select ng-model="countries" ng-name="country" ng-options="country.title for country in countries"  name="country" id="" class="form-control">
	    <option value="">--Выбрать страну--</option>
    </select>

И такой контроллер

function CountryController ($scope) {
	$scope.countries = [
		{title: "bla"}
	];
	VK.Api.call("database.getCountries", {code: "RU"}, function(r) {
		for(var i = 0; i < r.response.length; i++) {
			$scope.countries.push({title: r.response[i].title});
			console.log(r.response[i].title);
		} 
	});
}

Тестовое "bla" в $scope.countries отображает, но все рендерится до загрузки данных из ВК и больше ничего не отображается. Как можно исправить? Я не силен в Angular.

Answer 1

[nurise]

Вот так и решил.

function CountryController ($scope) {
	$scope.countries = [];
	VK.Api.call("database.getCountries", {code: "RU,UA,BY,KZ"}, function(r) {
		var countries_ar = [];
		for(var i = 0; i < r.response.length; i++) {
			countries_ar.push({title: r.response[i].title});
		} 
		$scope.$apply(function () {
			$scope.countries = countries_ar;
		});
	});
}

Comments

[akashtrih]

Угу, действительно jsfiddle.net/esXwH/1

[akashtrih]

Только в документации про это почему-то ничего не нашел.

[nurise]

@akashtrih положили сайт 500 Internal Server Error

[nurise]

@akashtrih только теперь вопрос в том, как получить список городов на основе id страны, потому что аналогичный контроллер, только теперь уже для городов, выдает ошибку, т.к. не может отправить запрос без id)

[akashtrih]

Как-то так? jsfiddle.net/esXwH/2

[nurise]

пока можно временно выводить города России))
function CityController ($scope) {
$scope.cities = [];
var country_id = 1 || document.getElementById("country").value;
VK.Api.call("database.getCities", {country_id: country_id}, function (r) {
var cities_ar = [];
for(var i = 0; i < r.response.length; i++) {
cities_ar.push({id: r.response[i].cid, title: r.response[i].title});
}
$scope.$apply(function () {
$scope.cities = cities_ar;
// console.log(cities_ar);
});
});
}

[nurise]

@akashtrih показал как надо выше) то есть пока так не работает)

[akashtrih]

Не знаю, чтоит ли для этого создавать отдельный контроллер. Я бы написал обращение к апи в коллбеке селекта (см. ng-change="onCountrySelected()"): jsfiddle.net/esXwH/3

[nurise]

@akashtrih неплохо. Я уже хотел создавать $resource. Это было бы правильным подходом?

[nurise]

@akashtrih спасибо) работает) только еще один вопрос касательно ng-options: ng-options="country.id as country.title for country in countries"
по идее должен в value вставлять id полученных стран, для России это единица, но он вставляет начиная с нуля. Что делаю не так?

[akashtrih]

Не могу ответить. Не знаю vk api, ангуляр тоже не особо :) Но вообще, стоит дважды подумать, надо ли тратить время на переписывание запросов через $resource, если есть уже готовое vk.api?

[akashtrih]

ng-options="country.id as country.title for country in countries"

Ну тут что-то не то. Попробуй

ng-options="country.title for country in countries"

и объект {title, value}, value автоматически подставляется в соответствующий атрибут селекта.

[akashtrih]

jsfiddle.net/esXwH/4

[nurise]

@akashtrih Даже в твоем примере в value не те значения) joxi.ru/B3R2UxjKTJC0RvSoklw

[nurise]

@akashtrih в итоге сделал через input hidden, но ng-change непонятно работает. То есть не всегда выдает новое значение. Пришлось повесить ng-click на selecte..

Answer 2

[Mikhail Osher]

Вполне очевидно.
Внимательней читайте документацию.

https://github.com/angular/angular.js/wiki/When-to...