Как получить доступ к значению динамического поля в angularjs?

Question

Я добавляю динамическое поле, используя 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/

Answer 1

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>