Question

我有两个输入，它们根据用户的需要动态填充表格。表行提交给控制器，这工作正常。问题是我需要将它们绑定到的模型是subjPoint.x和subjPoint.y 表中的角度表达式是 point.subjPointX和 point.subjPointY 我无法让它与.x一起工作如何设置它以便控制器不会将subjPoint视为子属性？ plunker

//Add New POD Row
$scope.pointArray = [];
$scope.addRow = function () {
    $scope.pointArray.push({
        'subjPointX': $scope.subjPointX,
        'subjPointY': $scope.subjPointY,

    });
    $scope.subjPointX = '';
    $scope.subjPointY = '';
};
$scope.point = {};
$scope.addSubjectPoint = function () {
    var point = $scope.point;
    var index = 0;
    $scope.pointArray.forEach(function (point) {
        console.log('pointArray #' + (index++) + ': ' + JSON.stringify(point));
    });
    var data = JSON.stringify($scope.pointArray);
 };

查看

  <form ng-submit="addSubjectPoint(point)" enctype="multipart/form-data">

   <ng-form role="form" ng-submit="addRow()">
    <input id="subjPointx" type="number" placeholder="Square Feet" ng-model="subjPointX" ng-pattern=" /^\d+$/" style="height: 34px;" step="500" />
      <input id="subjPointy" type="number" placeholder="Cost" ng-model="subjPointY" ng-pattern=" /^\d+$/" style="height: 34px;" step="10000"  />

  <input type="button" class="btn btn-primary btn-sm" ng-click="addRow()"  value=" Add"> 
  </ng-form>

  <table class="table">
  <tbody>
   <tr ng-repeat="point in pointArray">
      <td>{{point.subjPointX}}</td>
      <td>{{point.subjPointY}}</td>
       <td style="width:20px"><input type="button" value="X" class="btn btn-primary btn-sm" ng-click="removeRow(point.QBRFQLINESUPPLIERPARTNUMBER)"  /></td>
  </tr>
   </tbody>
   </table>

更新

              pointArray #0: {"x":500,"y":10000,"$$hashKey":"004"}
example.js:29 pointArray #1: {"x":1000,"y":20000,"$$hashKey":"006"}
example.js:29 pointArray #2: {"x":1500,"y":40000,"$$hashKey":"008"}

Answer 1

这样的东西会起作用吗？ plunker

<强>控制器

angular.module('demo', []);
angular.module('demo').controller('DemoCtrl', function ($scope) {
//Add New POD Row
    $scope.pointArray = [];
    $scope.addRow = function () {
        $scope.pointArray.push($scope.subjPoint);
        $scope.subjPoint = {};
    };
    //Remove  Row
    $scope.removeRow = function (x) {
        var index = $scope.pointArray.indexOf(x);
        if (index === -1) {
            alert("Something gone wrong");
        }
        $scope.pointArray.splice(index, 1);
        $scope.apply();
    };
});

<强>模板

<form ng-submit="addSubjectPoint(point)" enctype="multipart/form-data">

  <ng-form role="form" ng-submit="addRow()">
    <input id="subjPointx" type="number" placeholder="Square Feet" ng-model="subjPoint.x" ng-pattern=" /^\d+$/" style="height: 34px;" step="500" />
    <input id="subjPointy" type="number" placeholder="Cost" ng-model="subjPoint.y" ng-pattern=" /^\d+$/" style="height: 34px;" step="10000" />

    <input type="button" class="btn btn-primary btn-sm" ng-click="addRow()" value=" Add">
  </ng-form>

  <table class="table">
    <tbody>
      <tr ng-repeat="point in pointArray">
        <td>{{point.x}}</td>
        <td>{{point.y}}</td>
        <td style="width:20px">
          <input type="button" value="X" class="btn btn-primary btn-sm" ng-click="removeRow(point)" />
        </td>
      </tr>
    </tbody>
  </table>

  <input type="submit" class="btn btn-primary btn-sm" value=" Submit">
</form>

如何使用包含点的模型的子属性

1 个答案: