[英]AngularJS Form how to display radio buttons and data from json
我無法正確顯示json數據。
如何顯示json文件中的單選按鈕( plunker演示 )?
Aslo我想在提交時驗證表格。
HTML:
<my-form ng-app="CreateApp" ng-controller="mainController">
<form ng-submit="submitForm()" novalidate>
<fieldset>
<div ng-repeat="field in result.fields">
<label for="{{field.type}}">{{field.label}}</label>
<input
ng-required="{{field.required}}"
value="{{options.value}}"
type="{{field.type}}" >
<form-error ng-show="{{field.errorMessages.required}}"></form-error>
<form-error ng-show="{{field.errorMessages.invalid}}"></form-error>
</div>
</fieldset>
<button type="button" ng-click="onValidate(); return false;"> Validate</button>
<button type="submit" ng-disabled="userForm.$invalid"> Submit </button>
</form>
</my-form>
這是您如何遍歷單選選項的方法。 我同意@charlietfl,應該改用Angular - formly之類的Angular表單庫。
<fieldset>
<div ng-repeat="field in result.fields">
<div ng-if="field.type === 'radio'">
<span>{{field.label}}</span>
<div ng-repeat="option in field.options">
<label for="{{option.label}}">{{option.label}}</label>
<input ng-required="{{field.required}}"
value="{{options.value}}"
id="{{options.label}}"
type="{{field.type}}" >
</div>
</div>
<div ng-if="field.type !== 'radio'">
<label for="{{field.type}}">{{field.label}}</label>
<input ng-required="{{field.required}}"
value="{{options.value}}"
type="{{field.type}}" >
</div>
<form-error ng-show="{{field.errorMessages.required}}"></form-error>
<form-error ng-show="{{field.errorMessages.invalid}}"></form-error>
</div>
</fieldset>
首先在控制器上初始化一個值
$scope.richestClub = {};
$http.get('form.json').success(function(response) {
$scope.result = response;
var fields = response.fields;
$scope.richestClub.val = fields.answer.options[0].value;
console.log($scope.richestClub);
console.log($scope.fields);
});
HTML:
<form ng-submit="submitForm()" novalidate>
<fieldset>
<div ng-repeat="field in result.fields">
<label for="{{field.type}}">{{field.label}}</label>
<input ng-if="field.type != 'radio'" ng-required="{{field.required}}" value="{{options.value}}" type="{{field.type}}">
<div ng-if="field.type == 'radio'">
<div ng-repeat="option in field.options">
<input type="{{field.type}}" ng-model="richestClub.val" value="{{option.value}}">{{option.label}}</br>
</div>
</div>
<form-error ng-show="{{field.errorMessages.required}}"></form-error>
<form-error ng-show="{{field.errorMessages.invalid}}"></form-error>
</div>
</fieldset>
<button type="button" ng-click="onValidate(); return false;"> Validate</button>
<button type="submit" ng-disabled="userForm.$invalid"> Submit </button>
</form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.