-1

我在表单中使用 jquery 添加动态字段，但是当我尝试从该动态字段中获取值时，我没有得到任何值。

Javascript/AngularJs

var myApp = angular.module('myApp',[]);
myApp.controller('demoController',['$scope',function($scope){
    $scope.submitForm = function(){
        console.log($scope.book);
        alert($scope.book);
    }
}]);
function getHidden(){
    var inputHtml = '<input type="text" name="sessionDate" id="sessionDate" ng-model="book.sessionDate" ng-init="1233">';
  $('#addInput').html(inputHtml);
}

在上面的示例中，getHidden() 将在表单中添加动态字段，并且 alert/console.log() 将显示该字段的值。

html代码：

<div ng-app="myApp" ng-controller="demoController">
    <form id="demoForm" name="demoForm" ng-submit="submitForm()">
        <div id="addInput"></div>
        <input type="text" ng-init="demoModel='hi'" ng-model="book.demoModel" name="demoModel" />
        <a href="javascript:void(0)" onClick="getHidden()">Add Field</a>
        <button type="submit">Submit</button>
    </form>
</div>

要添加新的动态字段，请单击“添加字段”。在字段中键入一些值，然后按提交，这样您将在控制台中获得预加载文本框的值，而不是动态添加的字段值。

请查看 jsFiddle 链接以获取完整示例：https ://jsfiddle.net/krishna91/b6nk7x4d/47/

4

1 回答 1

0

AngularJS有自己的子集实现jQuery称为jQLite。所以不要JQuery和AngularJs一起使用。您只能AngularJs像下面这样来实现它。希望对您有所帮助：

var myApp = angular.module("myApp", []);
myApp.controller("demoController", [
  "$scope",
  function($scope) {
    $scope.arr = [
      'text here'
    ];
    $scope.addItem = function() {
      $scope.arr.push('text here');
    };

    $scope.submitForm = function() {
      console.log(1, $scope.arr);
    };
  }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="demoController">
  {{arr}}
  <form id="demoForm" name="demoForm">
    <div id="addInput" ng-repeat="x in arr track by $index">
      <input type="text" ng-model="arr[$index]" />
    </div>
    <button ng-click="addItem()">Add Field</button>
    <button ng-click="submitForm()">Submit</button>
  </form>
</div>

于 2019-01-30T08:29:16.900 回答