Динамические окна выбора в Angular

Question

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

Это работает правильно, но, поскольку они динамичны, они теряют состояние в моем Угловом приложении, если страница сбрасывается.

Я использую cookie сеанса для других данных.

Каков наилучший способ обернуть это в Угловое?

$(document).on("change", "#children", function() { 
    var $div = $('.add-wrap'); //Select the appending div 
    var $select = $('<div class="pull-left col-xs-1 col-sm-1 col-lg-1"><fieldset class="form-group">' 
     +'<label class="ach-search" for="children">Age</label>' 
     +'<select class="form-control" name="age" id="age">' 
     +'<option value="0">0</option>' 
     +'<option value="1">1</option>' 
     +'<option value="2">2</option>' 
     +'<option value="3">3</option>' 
     +'</select>' 
     +'</fieldset></div>').appendTo('.add-wrap') 
    $select.clone(); 
    var index = this.selectedIndex; //get the number of select 
    $div.empty(); //Erase old select 
    if(!index) return; //Stop the code if the number of child is 0 
    for(var u=0; u<index; u++){//Get the number of child 
     var $clone = $select.clone(); //Clone the template 
     $clone.appendTo($div); 
    } 
}).trigger('change'); 

Answer 1

Угловое имеет встроенную директиву для динамического генерирования списка опций в элементе select. Он называется ng-options.

Answer 2

Хорошо, давайте дадим вам подсказку.

Вот как вы могли бы сделать это с угловым (не проверял, но только так вы получите идею):

Number of children 
<input type="number" ng-model="childrenCount" ng-change="updateChildren()" /> 
<select ng-repeat="c in children" ng-model="c.age"> 
    <option ng-repeat="a in possibleAges" ng-value="a">{{a}} years</option> 
</select> 

И в контроллере:

$scope.updateChildren = function(){ 
    var c = $scope.childrenCount; 
    if(!$scope.children) 
     $scope.children = []; 
    else if($scope.children.length>c) 
     $scope.children.splice(c,$scope.children.length-c); // remove last elements 
    while($scope.children.length<c) 
     $scope.children.push({age:1}); // add children 
}; 
$scope.possibleAges= [1,2,3,4]; 

Используя это, $ объем .children содержит массив объектов, каждый из которых имеет свойство «age», связанное с одним из сгенерированных полей выбора.

Нет больше jQuery, как вы можете видеть.