如何用指令中更新的对象填充空数组？答案

【问题标题】：how to fill empty array with objects updated in directive?如何用指令中更新的对象填充空数组？
【发布时间】：2017-03-19 05:50:50
【问题描述】：

我从 Angular 指令开始了我的冒险。在我的应用程序的某个地方，我必须选择乘客人数。然后我必须为他们每个人分配“名字”和“姓氏”。所以我创建了一个简单的指令来为此创建 html 模板并在 ng-repeat 中使用它：

app.directive('ngDoubleInputBox', function() {
  return {
    restrict: 'E',
    scope: {
      'heading': '@?',
      'leftInputHeading': '@?',
      'rightInputHeading': '@?',
      'headingNumber': '@?',
      'passenger' : '='
    },
    templateUrl: '/src/html/doubleInput.html'
  }
});

和 doubleInput.html ：

<div class="inputContainer">
  <div class="containerTitle">{{headingNumber}}{{heading}}</div>
  <form class="form-inline">
    <div class="form-group leftInputContainer">
      <label for="left-input">{{leftInputHeading}}</label>
      <div>
        <input class="form-control" type="text" id="left-input" ng-model="passenger.firstName">
      </div>
    </div>
    <div class="form-group rightInputContainer">
      <label for="right-input">{{rightInputHeading}}</label>
      <div>
        <input class="form-control" type="text" id="right-input" ng-model="passenger.lastName">
      </div>
    </div>
  </form>
</div>

用法：

<div class="flightPassengersContent" ng-repeat="passenger in getPassengers() track by $index">
  <ng-double-input-box
  heading-number="{{$index + 1}}" heading=". Passenger"
  left-input-heading="First name" right-input-heading="Last name"
  model={{passenger}}>
  </ng-double-input-box>
</div>

我只有数量的乘客和空数组。

  $scope.getPassengers = function() {
    return new Array($scope.passengersAmmount);
  };

所以我的问题是：如何创建可以在这里使用的数据数组？将数组元素传递给指令并更改它们是一种好方法吗？如果是这样，如何准备这样的数组？我尝试创建一些具有空值的默认乘客对象并摆脱 track by $index" 语句，但它没有工作。

有什么想法吗？

问候，迈克尔

【问题讨论】：

是什么创建了$scope.passengersAmmount？创建或修改该值时，应创建空的乘客列表。

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat angular-directive

【解决方案1】：

我必须修复我的指令及其用法（将 passenger 属性替换为 model 属性）：

指令：

app.directive('ngDoubleInputBox', function() {
  return {
    restrict: 'E',
    scope: true,
    scope: {
      'heading': '@?',
      'leftInputHeading': '@?',
      'rightInputHeading': '@?',
      'headingNumber': '@?',
      'model':'='
    },
    templateUrl: '/src/html/doubleInput.html'
  }
});

用法：

<ng-double-input-box
heading-number="{{$index + 1}}" heading=". Passenger"
left-input-heading="First name" right-input-heading="Last name"
model=passenger>
</ng-double-input-box>

模板：

<div>
    <input class="form-control" type="text" ng-model="model.firstName">
</div>

@georgeawg 我能够删除 track by $index 并避免错误：

错误：ngRepeat:dupes Duplicate Key in Repeater

替换后：

$scope.getPassengers = function() {
    return new Array($scope.passengersAmmount);
};

与

  (function initializeEmptyPassengers() {
    $scope.passengers = [];
    for(i=0; i< $scope.passengersAmmount; i++) {
      $scope.passengers.push(
        {}
      );
    };
  })();

  $scope.getPassengers = function() {
    return $scope.passengers;
  };

所以现在我正在处理带有空对象的数组并将这些对象传递给指令，但这对我来说不是很干净的解决方案。有谁知道它是否可以使用
ng-repeat track by $index 获得相同的结果但没有先前的数组初始化？

【讨论】：