Angular select attributes
Добрый день. Я решил разобраться с angular.js, но столкнулся с такой трудностью. Вот, например, есть форма, которая состоит из select-а и input. Select и input должны быть заполнены. При этом в зависимости от выбранного значения в select-e, меняется допустимое минимальное значение в input-e. И вот возникает вопрос, как получить атрибуты выбранного select-a, и как лучше связать их с атрибутом min input[name=total]? Спасибо.
P.S. Если что-то упустил, рад получить ссылку в документации или на статью. На данный момент ковыряю дерективы. Пример:
<div class="deposit" ng-controller="formContrl">
<form method="post" name="form_deposit">
<select ng-model="valut" name="valut" required>
<option value="1" min="10000">BYR</option>
<option value="2" min="100">RUB</option>
<option value="3" min="1">USD</option>
</select>
<input type="number" name="total" value="" min="" required>
<span class="error" ng-show="form_deposit.total.$error.required || form_deposit.total.$error.number">!</span>
<input type="button" name="ok" ng-disabled="!form_deposit.$valid" value="Пополнить баланс">
</form>
</div>
function formContrl($scope)
{
$scope.valut = 3;
}
|
Набросал пример влияния select на min в input.
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
function СompCnt($scope) {
//опции формы
var options={
"1":{
minsumm:1000
},
"2":{
minsumm:2000
},
"3":{
minsumm:3000
}
};
//установим начальную сумму и валюту
$scope.summ=0;
$scope.valut=1;
//будем слкшать переключение валюты
$scope.$watch('valut',function(){
$scope.cOpt=options[ $scope.valut ]
//если сумма меньше минимума то выставим сумму на допустимый минимум
if ($scope.summ<$scope.cOpt.minsumm){
$scope.summ=$scope.cOpt.minsumm;
}
})
}
</script>
</head>
<body>
<div ng-controller="СompCnt">
Введите сумму: <input type="number" min="{{cOpt.minsumm}}" ng-model="summ">
<select ng-model="valut" name="valut" required>
<option value="3" >BYR</option>
<option value="2" >RUB</option>
<option value="1" >USD</option>
</select>
</div>
</body>
</html>
Кстатии для создания select очень часто используется директива ng-options |
Спасибо за ответ. Тогда такой вопрос, на сколько этично использовать связку JQuery и AngularJs такого вида?
$scope.total=parseFloat($('.total').html());
<div class="total">1000</div> |
Скорее всего в большинстве ситуаций значения в dom должны устанавливаться в контролах а не из DOM.
Но как знать, может для какойто ситуации установка значений из dom оправдана. Ну допустим к нам с сервера приходит готовая страница, которую мы не можем поменять, а надо написать некую клиентскую логику поверх этой страницы. В таком случае самым простом способом будет получение данные извлечь из из самой страницы. Фактическии парсинг, всякое бывает. Или ещё одна похожая ситуация. Страница должна обязательно индексироваться, но нам нужна клиентская логика Angular. Опять либо получать копию данных как на странице в формате json с сервера. Либо извлекать инфу из самой страницы, то бишь парсить. |
Спасибо за ответы на вопросы! Было весьма полезно узнать мнение форумчан)
|
| Часовой пояс GMT +3, время: 00:40. |