Javascript ng模型命名问题，试图构建数组，但得到了哈希值_Javascript_Angularjs

Javascript ng模型命名问题，试图构建数组，但得到了哈希值

javascript angularjs

Javascript ng模型命名问题，试图构建数组，但得到了哈希值,javascript,angularjs,Javascript,Angularjs,我正在尝试用ng模型构建一个数组 <div ng-repeat="n in [1, 2, 3]"> <input type="text" class="form-control" ng-model="headers[$index].key"> <input type="text" class="form-control" ng-model="headers[$index].value"> </div> 但是我想要这个 { "heade

我正在尝试用ng模型构建一个数组

<div ng-repeat="n in [1, 2, 3]">
  <input type="text" class="form-control" ng-model="headers[$index].key">
  <input type="text" class="form-control" ng-model="headers[$index].value">
</div>

但是我想要这个

{
  "headers": [
    {
      "key": "xxx",
      "value": "yyy"
    }
  ]
}

这不可能吗？

这就是你的意思吗

index.js

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="object in transformedData">
      <input type="text" class="form-control" ng-model="object.key">
      <input type="text" class="form-control" ng-model="object.value">
    </div>

    <pre>{{transformedData}}</pre>
  </body>

</html>

您只需将

标题

初始化为一个数组，

ng model

分配就可以了

我已经更改了@Matt共享的plunker，请检查这里

我不知道您所说的“使用ng模型构建阵列”是什么意思。通常，您有一些数据，并将其指定为ng模型指令。ng modal不做任何这样的建筑。数据在控制器中是如何显示的？哦，你用数字替换了

$index

，这就成功了，我想$index不是一个数值

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="object in transformedData">
      <input type="text" class="form-control" ng-model="object.key">
      <input type="text" class="form-control" ng-model="object.value">
    </div>

    <pre>{{transformedData}}</pre>
  </body>

</html>

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

app.controller('MainCtrl', function($scope) {

  var data = {
    "headers": {
      "0": {
        "key": "xxx",
        "value": "yyy"
      }
    }
  };

  $scope.transformedData = transformData(data.headers)

  function transformData(data){
    var arr = [];
    for(var key in data){
      arr.push(data[key])
    }
    return arr;
  }

});