I'm not able to send the complete form data using ng-submit. Appended div data is being sent as undefined

问题

I'm not able to send the complete form data using ng-submit.I'm able to send the data containing even name, event status, trigger event and relay state. The data of the appended div is being sent as undefined.Thankyou

var app = angular.module('demo', []);
app.controller("ruleCtrl", ['$scope', '$http', function($scope, $http) {
  jQuery(document).ready(function() {
    jQuery("#condition").click(function(e) {
      e.preventDefault();
      jQuery('#shw').append(jQuery('.hiddenRule').clone().removeClass("hiddenRule"));
    });
  });
  jQuery('#shw').on('click', '#delete', function(e) {
    e.preventDefault();
    jQuery(this).parent().remove();
  });
  jQuery(document).ready(function() {
    jQuery("#condition").click(function() {
      jQuery('#add').show();
    });
  });
  $scope.addRule = function() { //to add
    var dataObj = {
      configuration: {
        rule: {
          name: $scope.eventname,
          status: $scope.eventstatus,
          triggerOn: $scope.triggerevent,
          onSuccess: $scope.relaystate,
          conditions: [{
              fact: $scope.sensor,
              operator: $scope.condition,
              value: $scope.thresholdvalue,
            }
            /*{ fact: "t1",
              operator: "greaterThan",
              value: 40
              },
              {
              fact: "h1",
              operator: "lessThanInclusive",
              value: 122
              } */
          ]
        }
      }
    };
    console.log(dataObj);
    $http.post('/v1/relay/configuration/add', dataObj)
      .then(function(result) {},
        function(data, status) {});
  };
}])

.hiddenRule {
  display: none
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div ng-app="demo" ng-controller="ruleCtrl">

    <form ng-submit="addRule()">
      <fieldset>
        <table class='addRuleHolder'>
          <tr>
            <td class="label-col">
              <label>Event Name:</label>
            </td>
            <td>
              <input type="text" ng-model="eventname">
            </td>
          </tr>
          <tr>
            <td class="label-col">
              <label>Event status:</label>
            </td>
            <td>
              <select ng-model="eventstatus">
                <option value="enabled">Enabled</option>
                <option value="disabled">Disabled</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="label-col">
              <label>Trigger Event:</label>
            </td>
            <td>
              <select ng-model="triggerevent">
                <option value="all">All Conditions</option>
                <option value="any">Any Conditions</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="label-col">
              <label>Relay State:</label>
            </td>
            <td>
              <select ng-model="relaystate">
                <option value="1">On</option>
                <option value="0">Off</option>
              </select>
            </td>
          </tr>
        </table>
        <div style="margin-top: 20px; float:right;padding-right:15px">
          <button id="condition">Condition</button>
        </div>
      </fieldset>

      <div class="hiddenRule">
        <fieldset>
          <table class='addRuleHolder'>
            <tr>
              <td class="label-col">
                <label>Sensor:</label>
              </td>
              <td>
                <select ng-model="sensor">
                  <option value="s1">S1</option>
                  <option value="s2">S2</option>
                </select>
              </td>
            </tr>
            <tr>
              <td class="label-col">
                <label>Condition:</label>
              </td>
              <td>
                <select ng-model="condition">
                  <option value="lessThan">&lt;</option>
                  <option value="lessThanInclusive">&lt;=</option>
                  <option value="greaterThan">&gt;</option>
                  <option value="greaterThanInclusive">&gt;=</option>
                </select>
              </td>
            </tr>
            <tr>
              <td class="label-col">
                <label>Threshold Value:</label>
              </td>
              <td>
                <input type="text" ng-model="thresholdvalue">
              </td>
            </tr>
          </table>
          <button style="margin-top: 20px; float:right;padding-right:15px" id="delete">delete</button>
        </fieldset>
      </div>
      <br style="clear:both" />
      <div id="shw"></div>
      <button style="margin-top: 20px; float:right;padding-right:15px;margin-right: 10px; display:none" type="submit" value="Add" id="add">Add Schedule</button>

    </form>
  </div>
</body>

</html>

Can anyone help me out how to submit the complete data? Your leads would be very helpful for me.Sorry for my bad English and it might be a silly mistake, please correct me as I'm new to angularjs.

来源：https://stackoverflow.com/questions/48988790/im-not-able-to-send-the-complete-form-data-using-ng-submit-appended-div-data-i

标签

javascript

jquery

angularjs

jquery-ui

angularjs-scope