Angularjs установить выбранное значение

Question

В HTML страницы У меня есть выбор, как показано ниже,

<select> 
    <option value="GMT-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> 
    <option value="GMT-11:00">(GMT -11:00) Midway Island, Samoa</option> 
    <option value="GMT-10:00">(GMT -10:00) Hawaii</option> 
    <option value="GMT-9:00">(GMT -9:00) Alaska</option> 
    ... 
</select> 

Тогда я запроса к REST API и получить человек данные, например,

person : { 
    language : "en_US", 
    timezone : "GMT-9:00" 
    ... 
} 

Вопрос: Как могу ли я установить «(GMT -9: 00) Аляску» как выбранную при отображении этой страницы в приложении AngularJS?

Answer 1

Вы можете использовать атрибут ng-model, чтобы связать ответ API json с вашим входом select.

Учитывая ваш HTML, мы получаем этот снимок выбора, который будет привязан к person.timezone.

<div ng-controller="MainController"> 
    <select ng-model="person.timezone"> 
     <option value="GMT-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> 
     <option value="GMT-11:00">(GMT -11:00) Midway Island, Samoa</option> 
     <option value="GMT-10:00">(GMT -10:00) Hawaii</option> 
     <option value="GMT-9:00">(GMT -9:00) Alaska</option> 
    </select> 
    </div> 

Теперь вам нужен контроллер на самом деле вызова службы отдыха и получить лицо объекта:

function MainController($scope, $http) { 
    /* query rest api and retrive the person 
    this of course would be replaced with the url of your actual rest call */ 
    $http({method: 'GET', url: 'rest_api_response.json'}).success(function(data, status, headers, config) { 
    $scope.person = data; 
    // dont apply if were in digest 
    if(!$scope.$$phase) 
     $scope.$apply(); 
    }). 
    error(function(data, status, headers, config) { 
    console.log("error retriveing rest api response"); 
    }); 
} 

---

Для этого образца я только что сделал файл с именем "rest_api_response.json", который содержит ваш réponse

{ 
"language" : "en_US", 
"timezone" : "GMT-9:00" 
} 

Heres a plunker with the sample contained

Answer 2

Ваше падение не находится в "Angular world".
У вас нет модели, привязанной к ней, поэтому, когда вы измените свой выбор ничего действительно произойдет в угловом мире.

Так как:

1.Change вы падаете вниз, чтобы работать в «Угловом мире» с привязкой модели (а затем легко выполнять то, что вам нужно, присвоив значение, которое вы получаете от сервера в выбранном значение.)
Heres a nice reference.

2.Continue работает в неграмотном мире с чистыми JS или фреймами, такими как JQuery, и делайте это по-другому.