Angular ngForm 包装元素?
Angular ngForm wrapped elements?
是否有 angular 方法将输入元素包装到 ngForm
指令中?
(我需要用到ngForm,这是成asp.net的形式)
angular.module('app',[])
.controller('formCtrl', function($scope){
$scope.formFields;
$scope.model={
"text": 'simple text',
"number": 1,
"textarea": 'lsadij isdajo\n dasjojoisajijsdaojsdaio jioasdj'
};
$scope.getNgFormInputs = function(e){
$scope.formInfo = $scope.myFrm
$scope.formFields = angular.noop //??? is it possible to get wrapped inputs?
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="formCtrl">
<div ng-bind="model.text"></div>
<div ng-bind="model.number"></div>
<pre ng-bind="model.textarea"></pre>
<ng-form name='myFrm'>
<input type="text" ng-model="model.text"><br>
<input type="text" ng-model="model.number"><br>
<textarea ng-model="model.textarea"></textarea><br>
<button ng-click="getNgFormInputs($event)" role="submit">Save</button>
</ng-form>
{{formInfo}}<hr>
{{formFields}}
</div>
</div>
感谢
是的,如果我没理解错的话。参考看这个
https://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform
感谢 Syed,参考资料解决了我的问题。
我建议人们在回答中阅读我自己的评论。
angular.module('app',[])
.controller('formCtrl', function($scope){
$scope.formFields;
$scope.model={
"text": 'simple text',
"number": 1,
"textarea": 'lsadij isdajo\n dasjojoisa \n jijsdaojsdaio jioasdj'
};
$scope.formFieldsAndValues = {}
$scope.getNgFormInputs = function(e){
$scope.formFields = keys = Object.keys($scope.myFrm).filter(x => (!/^$/.test(x)) )
keys.forEach(x=> $scope.formFieldsAndValues[x] = $scope.myFrm[x].$viewValue)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="formCtrl">
<div ng-bind="model.text"></div>
<div ng-bind="model.number"></div>
<pre ng-bind="model.textarea"></pre>
<ng-form name='myFrm'>
<input type="text" ng-model="model.text" name="text"><br>
<input type="text" ng-model="model.number" name="number"><br>
<textarea type="text" ng-model="model.textarea" name="textarea"></textarea><br>
<button ng-click="getNgFormInputs($event)" role="submit">Save</button>
</ng-form>
<hr>
form fields:
{{formFields}}
<hr>
field,value pairs:
{{formFieldsAndValues}}
</div>
</div>
是否有 angular 方法将输入元素包装到 ngForm
指令中?
(我需要用到ngForm,这是成asp.net的形式)
angular.module('app',[])
.controller('formCtrl', function($scope){
$scope.formFields;
$scope.model={
"text": 'simple text',
"number": 1,
"textarea": 'lsadij isdajo\n dasjojoisajijsdaojsdaio jioasdj'
};
$scope.getNgFormInputs = function(e){
$scope.formInfo = $scope.myFrm
$scope.formFields = angular.noop //??? is it possible to get wrapped inputs?
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="formCtrl">
<div ng-bind="model.text"></div>
<div ng-bind="model.number"></div>
<pre ng-bind="model.textarea"></pre>
<ng-form name='myFrm'>
<input type="text" ng-model="model.text"><br>
<input type="text" ng-model="model.number"><br>
<textarea ng-model="model.textarea"></textarea><br>
<button ng-click="getNgFormInputs($event)" role="submit">Save</button>
</ng-form>
{{formInfo}}<hr>
{{formFields}}
</div>
</div>
感谢
是的,如果我没理解错的话。参考看这个 https://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform
感谢 Syed,参考资料解决了我的问题。
我建议人们在回答中阅读我自己的评论。
angular.module('app',[])
.controller('formCtrl', function($scope){
$scope.formFields;
$scope.model={
"text": 'simple text',
"number": 1,
"textarea": 'lsadij isdajo\n dasjojoisa \n jijsdaojsdaio jioasdj'
};
$scope.formFieldsAndValues = {}
$scope.getNgFormInputs = function(e){
$scope.formFields = keys = Object.keys($scope.myFrm).filter(x => (!/^$/.test(x)) )
keys.forEach(x=> $scope.formFieldsAndValues[x] = $scope.myFrm[x].$viewValue)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="formCtrl">
<div ng-bind="model.text"></div>
<div ng-bind="model.number"></div>
<pre ng-bind="model.textarea"></pre>
<ng-form name='myFrm'>
<input type="text" ng-model="model.text" name="text"><br>
<input type="text" ng-model="model.number" name="number"><br>
<textarea type="text" ng-model="model.textarea" name="textarea"></textarea><br>
<button ng-click="getNgFormInputs($event)" role="submit">Save</button>
</ng-form>
<hr>
form fields:
{{formFields}}
<hr>
field,value pairs:
{{formFieldsAndValues}}
</div>
</div>