Angular ngForm包裹元素?

时间:2016-04-28 22:24:19

标签: angularjs angularjs-ng-form

有一种角度方式可以将输入元素包装到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>
&#13;
&#13;
&#13;

韩国社交协会

2 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

感谢Syed,该参考解决了我的问题。

我建议人们在回答中阅读我自己的评论。

&#13;
&#13;
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)
  
  }


})
&#13;
<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>
&#13;
&#13;
&#13;

相关问题