Группа переключателей AngularJS со значением выбора списка

У меня есть приложение AngularJS, которое просит пользователя ввести номер из некоторых параметров с помощью группы переключателей, чтобы указать их выбор.Группа переключателей AngularJS со значением выбора списка

Существует 3 фиксированных параметра (например, со значениями 1, 2 и 3) и четвертый вариант, который содержит список выбора с дополнительными значениями 4, 5, 6. Фиксированные значения являются общими для их разделения но мы хотим дать альтернативные варианты.

Все в порядке, если нет выбора в качестве 4-го варианта, но у меня возникают проблемы с обработкой двух отдельных значений для значения переключателя и значения списка выбора.

В идеале, разметка для этой ситуации что-то вроде

<!-- Controller aliased as ctrl-->  

<!-- Fixed Option 1--> 
<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="1"/> 
    1 
</label> 
<!-- Fixed Option 2--> 
<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="2"/> 
    2 
</label> 
<!-- Fixed Option 3--> 
<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="3"/> 
    3 
</label> 

<!-- Custom Option--> 
<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="?"/> 
    <select ng-model="ctrl.SelectedNumber" ng-options="option for option in [4, 5, 6]"></select> 
</label>

С контроллером, который выглядит как

... 
var ctrl = this; 
ctrl.SelectedNumber = 1; 
...

Мой вопрос заключается в следующем: как можно следить за состоянием группу переключателей и состояние списка выбора для привязки к одному выбранному параметру?

A jsFiddle можно найти here. Спасибо!

источник

2015-12-07 rictionaryFever

jsFiddle, кажется, работает. Вы просто хотите, чтобы переключатель был только _appear_, чтобы быть выбранным? – jperezov

Зачем вам четвертое радио? – dfsq

@jperezov, Да, я хочу, чтобы переключатель был выбран. Это взаимодействие между ng-значением 4-го переключателя, ng-модели на всех переключателях и ng-моделью в списке выбора, с которым у меня возникают проблемы. Я просто слишком усложняю это? Спасибо, что посмотрели на него. – rictionaryFever

Для того, чтобы изменить поле выбора, нажмите кнопку «Радио», вам действительно нужно, чтобы ее модель была другой переменной, и используйте $scope.$watch, чтобы синхронизировать их. Fiddle here.

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

var ctrl = this; 
ctrl.SelectedNumber = 1; 
ctrl.selectVal = 4; 
$scope.$watch('ctrl.selectVal', function(val) { 
    ctrl.SelectedNumber = val; 
});

И ваш обновленный HTML (только кнопка последнего радио/выберите):

<input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" ng-value="ctrl.selectVal" /> 
<select ng-model="ctrl.selectVal" ng-options="option for option in [4, 5, 6]"></select>

ng-value кнопки радио становится ng-model выбора.

источник

2015-12-07 20:12:00 jperezov

Спасибо. Это именно то, что я искал. – rictionaryFever

Также вы можете вызвать функцию для выбора списка, чтобы выбрать последнюю радиокнопку. Как ..

HTML

<label> 
    <input type="radio" name="selectedNumber" ng-model="ctrl.SelectedNumber" value="{{ctrl.selectval}}" /> 
    <select ng-model="ctrl.selectval" ng-change="ctrl.selectFromList(ctrl.selectval)" ng-options="option for option in [4, 5, 6]"></select> 
    </label>

и контроллер:

app.controller("MainCtrl", function() { 
    var ctrl = this; 
    ctrl.SelectedNumber = 1; 
    ctrl.selectval=4; 
    ctrl.selectFromList = function(getVal) { 
     ctrl.SelectedNumber = getVal; 
    }; 
    });

источник

2015-12-07 20:51:54

Группа переключателей AngularJS со значением выбора списка

ответ

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