如何使用 AngularJS 使用预设（并更新它们）正确填充输入字段？

Question

请检查此JSFiddle。添加暗淡预设时，它会正确添加到$scope.packData，但不会正确填充输入字段。之后，如果您尝试直接从输入字段更新$scope.packData，它将无法正常工作。它仅适用于暗淡预设。 我在这里错过了什么？

下面是代码。

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.packData = [{
    length: null,
    width: null,
    height: null
  }];

  $scope.addNewpack = function() {
    $scope.packData.push({
      length: null,
      width: null,
      height: null
    });
  };

  $scope.removepack = function(index) {
    if ($scope.packData.length != 1) {
      $scope.packData.splice(index, 1);
    }
  };

  $scope.dimPresets = [{
    length: 73,
    width: 54,
    height: 45,
    tare: 2
  }, {
    length: 11,
    width: 11,
    height: 11,
    tare: 1
  }, {
    length: 23,
    width: 23,
    height: 23,
    tare: 4
  }, {
    length: 41,
    width: 52,
    height: 63,
    tare: 6
  }];

  $scope.fillLastpack = function(length, width, height, tare) {
    var lastpack = $scope.packData.length - 1;
    $scope.packData[lastpack] = [{
      "length": length,
      "width": width,
      "height": height
    }];
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myApp">
  <div class="row">
    <div class="col-md-6">
      <div class="form-inline">
        <div class="form-group-sm">
          <fieldset data-ng-repeat="pack in packData" style="padding-bottom:5px;">
            <label class="control-label col-sm-4">Pack {{$index+1}}: </label>
            <input type="number" class="form-control" style="width:80px;" id="length" ng-model="pack.length" name="" placeholder="length">
            <input type="number" class="form-control" style="width:80px;" id="width" ng-model="pack.width" name="" placeholder="width">
            <input type="number" class="form-control" style="width:80px;" id="height" ng-model="pack.height" name="" placeholder="height">
            <button ng-click="removepack($index)" ng-hide="packData.length==1">-</button>
          </fieldset>
        </div>
      </div>
      <div class="form-group-sm" style="padding-top:5px;">
        <span class="col-sm-4"></span>
        <button ng-click="addNewpack()">Add pack</button>
      </div>
      <div>{{packData}}</div>
    </div>

    <div class="col-md-6">
      <div class="form-group-sm">
        <div class="col-sm-6">
          <div class="btn-group-sm" uib-dropdown>
            <span>Add dim: </span>
            <ul>
              <li ng-repeat="preset in dimPresets" ng-click="fillLastpack(preset.length, preset.width, preset.height, preset.tare)">
                <a href="">{{preset.length}}cm x {{preset.width}}cm x {{preset.height}}cm</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

以下是更正后的代码。在您的函数fillLastpack() 中，您将一个对象数组推送到packData 数组中，而您只需推送一个对象。

Updated Fiddle

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.packData = [{
    length: null,
    width: null,
    height: null
  }];

  $scope.addNewpack = function() {
    $scope.packData.push({
      length: null,
      width: null,
      height: null
    });
  };

  $scope.removepack = function(index) {
    if ($scope.packData.length != 1) {
      $scope.packData.splice(index, 1);
    }
  };

  $scope.dimPresets = [{
    length: 73,
    width: 54,
    height: 45,
    tare: 2
  }, {
    length: 11,
    width: 11,
    height: 11,
    tare: 1
  }, {
    length: 23,
    width: 23,
    height: 23,
    tare: 4
  }, {
    length: 41,
    width: 52,
    height: 63,
    tare: 6
  }];

  $scope.fillLastpack = function(length, width, height, tare) {
    var lastpack = $scope.packData.length - 1;
    $scope.packData[lastpack] = {
      "length": length,
      "width": width,
      "height": height
    };
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myApp">
  <div class="row">
    <div class="col-md-6">
      <div class="form-inline">
        <div class="form-group-sm">
          <fieldset data-ng-repeat="pack in packData" style="padding-bottom:5px;">
            <label class="control-label col-sm-4">Pack {{$index+1}}: </label>
            <input type="number" class="form-control" style="width:80px;" id="length" ng-model="pack.length" name="" placeholder="length">
            <input type="number" class="form-control" style="width:80px;" id="width" ng-model="pack.width" name="" placeholder="width">
            <input type="number" class="form-control" style="width:80px;" id="height" ng-model="pack.height" name="" placeholder="height">
            <button ng-click="removepack($index)" ng-hide="packData.length==1">-</button>
          </fieldset>
        </div>
      </div>
      <div class="form-group-sm" style="padding-top:5px;">
        <span class="col-sm-4"></span>
        <button ng-click="addNewpack()">Add pack</button>
      </div>
      <div>{{packData}}</div>
    </div>

    <div class="col-md-6">
      <div class="form-group-sm">
        <div class="col-sm-6">
          <div class="btn-group-sm" uib-dropdown>
            <span>Add dim: </span>
            <ul>
              <li ng-repeat="preset in dimPresets" ng-click="fillLastpack(preset.length, preset.width, preset.height, preset.tare)">
                <a href="">{{preset.length}}cm x {{preset.width}}cm x {{preset.height}}cm</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

希望对你有帮助:)