Я пытаюсь создать динамическую часть моей формы, начиная со значения, получаемого при вызове http (а затем и при выборе).Форма должна быть обязательной.Это означает, что каждый вход должен быть обязательным.Конечно, если значение, которое я проверяю, не является «правильным», часть формы должна быть скрыта, а входные данные должны быть установлены как необязательные (в противном случае я не могу сохранить данные).
Я уже сделал это, когда прибывает первое значение (из http, я просто проверяю значение и изменяю часть show / hide & required / not required), но я не могу сделать это для выбора (значение http ивыборка довольно похожа, но выборка должна быть полностью динамичной)Я просто не понимаю, почему, механика должна быть точно такой же.
Здесь html часть:
Это статическое значение (из вызова http)
<div class="form-group col-sm-12">
<label class="form-control-label">Classificazione 1</label>
<br />
{{picture.PictureClass.Class}}
</div>
А остальные
<span id="showDiv" ng-show = "false">
<div class="row">
<div class="form-group col-sm-12" ng-class="{ 'has-error' : formPicture.ReportingDetail.$invalid && formPicture.ReportingDetail.$touched}">
<label for="ReportingDetail" class="form-control-label">Analisi Segnalazione</label>
<select ng-disabled="accessLevelStatus() < 2"
class="form-control" name="ReportingDetail"
id="ReportingDetail" placeholder="ReportingDetail"
ng-model="picture.ReportingDetail">
<option value=""></option>
<option value="Segnalazione ambientale">Segnalazione ambientale</option>
<option value="Segnalazione di sicurezza">Segnalazione di sicurezza</option>
<option value="Segnalazione strutturale">Segnalazione strutturale</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12" ng-class="{ 'has-error' : formPicture.Reason.$invalid && formPicture.Reason.$touched}">
<label for="Reason" class="form-control-label">Motivazioni</label>
<textarea ng-disabled="accessLevelStatus() < 2" id="Reason"
class="form-control" name="Reason"
ng-model="picture.Reason">
</textarea>
</div>
</div>
</span>
Вот как мне это удается
$scope.picture = ReportingPictureService.pictures.get({id: $stateParams.id}, function (picture) {
$scope.title = 'Modifica segnalazione';
$scope.picture.PictureDate = new Date($scope.picture.PictureDate);
//Se la Classificazione 1 >= 3 (Segnalazione/Segnalazione urgente), allora mostro i campi associati alla segnalazione
var div = angular.element('#showDiv');
var reportingDetailInput = angular.element('#ReportingDetail');
var reasonInput = angular.element('#Reason');
//Se Classificazione 1 >= 3, allora gli input sono visibili e sono tutti required
if($scope.picture.PictureClass_ID >= 3) {
div.attr('ng-show',"true");
reportingDetailInput.attr('required',"required");
reasonInput.attr('required',"required");
}
else {
div.attr('ng-show',"false");
reportingDetailInput.attr('required',"false");
reasonInput.attr('required',"false");
}
//Tengo conto anche di Classificazione 2 e uso le seguenti funzioni per modificare gli attributi degli input e dello span (show and hide)
$scope.changeClass2 = function() {
if(picture.PictureClass2_ID >= 3) {
div.attr('ng-show',"true");
reportingDetailInput.attr('required',"required");
reasonInput.attr('required',"required");
}
else {
div.attr('ng-show',"false");
reportingDetailInput.attr('required',"false");
reasonInput.attr('required',"false");
}
}
//Funzione che gestisce lo show/hide dei due input
$scope = div.scope();
$injector = div.injector();
$injector.invoke(function($compile) {
$compile(div)($scope)
});
//Funzione che gestisce il required = true/false del campo Analisi Segnalazioni
$scope = reportingDetailInput.scope();
$injector = reportingDetailInput.injector();
$injector.invoke(function($compile) {
$compile(reportingDetailInput)($scope)
});
//Funzione che gestisce il required = true/false del campo Motivazioni
$scope = reasonInput.scope();
$injector = reasonInput.injector();
$injector.invoke(function($compile) {
$compile(reasonInput)($scope)
});
downloadImage($scope.picture);
})
Часть span (часть show / hide, статическое значение http) должна быть видимой (и обязательной)когда $ scope.picture.PictureClass_ID> = 3. Конечно, его следует скрывать (и не обязательно), когда $ scope.picture.PictureClass_ID <3. </p>
$ scope.picture.PictureClass2_ID - то же самое, ноон должен динамически меняться с помощью функции выбора.
Первая часть работает хорошо, но выбранная часть не работает.Любая идея о том, как это не работает?