AngularJS - обновление просмотра страницы при выборе смены выпадающего списка

Я создал два раскрывающихся списка с использованием тега select, и я хотел бы, чтобы значения второго раскрывающегося списка обновлялись на основе первого раскрывающегося списка и на основе второго раскрывающегося списка, значения обновления под ним ,AngularJS - обновление просмотра страницы при выборе смены выпадающего списка

Я слышал, что могу использовать $ apply, но у меня нет идеи, куда его поместить и как его использовать. Я бы оценил любое предложение, что я должен изменить, чтобы это работало.

Это мои файлы.

angular.module('app', []).controller('contr', function ($scope) { 
 

 
    $scope.data = [ 
 
\t \t { 
 
\t \t  name: 'Ala', 
 
\t \t  holiday: [ 
 
       { month: 'June', location: ['Rome', 'Wien'] }, 
 
       { month: 'July', location: ['Budapest', 'Bucharest'] }, 
 
       { month: 'August', location: ['Warsaw', 'Prague']} 
 
\t \t  ] 
 
\t \t }, 
 
\t \t { 
 
\t \t  name: 'Bob', 
 
\t \t  holiday: [ 
 
       { month: 'January', location: ['Paris', 'Madrid'] }, 
 
       { month: 'February', location: ['London', 'Dublin'] }, 
 
\t \t  ] 
 
\t \t } 
 
    ]; 
 

 
    $scope.person = $scope.data[0]; 
 
    $scope.holidays = $scope.person.holiday; 
 
    $scope.holiday = $scope.holidays[0]; 
 
    $scope.locations = $scope.holiday.location; 
 
});

<!doctype html> 
 
<html ng-app='app' ng-controller='contr'> 
 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="js/myApp.js"></script> 
 
    <script src="js/angular.js"></script> 
 

 
    Person:<select ng-model='person' ng-options='info as info.name for info in data'></select></br> 
 
    Month:<select ng-model='holiday' ng-options='holiday as holiday.month for holiday in holidays'></select></br> 
 
\t </br>Places:</br> 
 
    <div ng-repeat='location in locations'>Location: {{location}}</div> 
 
</body> 
 
</html>

источник

2016-12-22 Adam Korzeniak

Там нет необходимости добавлять часы в вашем случае. Попробуй это.

<!doctype html> 
 
<html ng-app='app' ng-controller='contr'> 
 

 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script> 
 
     angular.module('app', []).controller('contr', function ($scope) { 
 

 
      $scope.data = [ 
 
        { 
 
         name: 'Ala', 
 
         holiday: [ 
 
          { 
 
           month: 'June', 
 
           location: ['Rome', 'Wien'] 
 
          }, 
 
          { 
 
           month: 'July', 
 
           location: ['Budapest', 'Bucharest'] 
 
          }, 
 
          { 
 
           month: 'August', 
 
           location: ['Warsaw', 'Prague'] 
 
          } 
 
         ] 
 
        }, 
 
        { 
 
         name: 'Bob', 
 
         holiday: [ 
 
          { 
 
           month: 'January', 
 
           location: ['Paris', 'Madrid'] 
 
          }, 
 
          { 
 
           month: 'February', 
 
           location: ['London', 'Dublin'] 
 
          }, 
 
         ] 
 
        } 
 
       ]; 
 

 
      $scope.SetMonthValue = function(){ 
 
       $scope.holiday = $scope.person.holiday[0]; 
 
      } 
 
      
 
      $scope.person = $scope.data[0]; 
 
      $scope.holidays = $scope.person.holiday; 
 
      $scope.holiday = $scope.holidays[0]; 
 
      $scope.locations = $scope.holiday.location; 
 
     }); 
 
    </script> 
 

 

 
    Person: 
 
    <select ng-model='person' ng-change="SetMonthValue()" ng-options='info as info.name for info in data'></select> 
 
    Month: 
 
    <select ng-model='holiday' ng-options='holiday as holiday.month for holiday in person.holiday'></select>  
 
    Location 
 
    <select ng-model='location' ng-options='location for location in holiday.location'></select> 
 

 
    <div>Location: {{holiday.location}}</div>  
 
    
 
    <div>Third dropdown value: {{location}}</div> 
 

 
</body> 
 

 
</html>

Так как вам нужен второй выберите вариант в зависимости от значения, выбранного в первом, используйте источник в качестве первого ng-model значения первого выбора коробки,

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

Добавление часов для этих целей не является хорошим решением. Старайтесь избегать просмотра переменных в максимально возможных случаях.

источник

2016-12-22 10:03:52 Nitheesh

Работает хорошо, но если я хочу, чтобы второе значение выпадающего значения по умолчанию было установлено на первый вариант, а не на пустое значение, тогда нужны часы? –

№ Вы можете использовать событие ng-change. Использование часов не является хорошим методом – Nitheesh

@AdamKorzeniak Я также включил это, обновил код – Nitheesh

$scope.apply не нужен здесь. Вы можете использовать apply, чтобы угловое знание изменений области вне цикла углового вычисления.

$watch является то, что вы хотите здесь

$scope.$watch('person', function(newPerson) { 
    $scope.holidays = newPerson.holiday; 
    $scope.holiday = $scope.holidays[0]; 
});

Вы также можете изменить ng-options для праздника выпадающего списка

<select ng-model='holiday' ng-options='holiday as holiday.month for holiday in person.holiday'></select>

Из документации:

$ применяются() используется для выполнения выражение в угловом из-за угла углового каркаса. (Например, из событий браузера DOM, setTimeout, XHR или сторонних библиотек). Поскольку мы вызываем угловую структуру, нам необходимо выполнить правильный жизненный цикл обработки исключительных ситуаций, выполняющих часы.

$apply документы: https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope # $ применять

$watch документы: https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope # $ смотреть

источник

2016-12-22 09:56:09 rzelek

AngularJS - обновление просмотра страницы при выборе смены выпадающего списка

ответ

Смежные вопросы