javascript - 在下拉菜单angularjs中设置ng-model中的列表项

Question

目前我遇到了一个 angularjs 问题。以下场景:

我有一个游戏实体和一个团队实体。一个游戏可以容纳多个团队对象。 (多对多关系)

在我的前端应用程序中，我想添加一个带有可选团队的新游戏。对于 Teams，我决定使用两个下拉菜单(每个菜单对应一个团队)。

现在我无法为 ng-model 提供正确的值。

我试过类似的东西，但它可能是错误的:

<select class="form-control" ng-options="team.teamname for team in teams 
track by team.id" ng-model="game.teams[0]">
  <option value="" selected>-- No Team --</option>
</select>

<select class="form-control" ng-options="team.teamname for team in teams 
track by team.id" ng-model="game.teams[1]">
  <option value="" selected>-- No Team --</option>
</select>

只要我点击保存按钮，我就会收到一条错误消息“400:无法处理 JSON”:

Possibly unhandled rejection: {"data":{"code":400,"message":"Unable to process JSON"},"status":400,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","data":{"teams":{"0":{"id":1,"games":[{"id":1,"date":20180810}],"teamname":"BVB"},"1":{"id":2,"games":[{"id":1,"date":20180810}],"teamname":"FCB"}},"date":"20180810"},"url":"/api/games","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"}},"statusText":"Bad Request"}

当使用 Postman 为游戏创建两个团队时，它有效:

{
    "date": 20180810,
    "teams": [{"id": 1}, {"id": 2}]
}

输出:

{
  "id": 1,
  "date": 20180810,
  "teams": [
      {
          "id": 1,
          "games": [
              {
                  "id": 1,
                  "date": 20180810
              }
          ],
          "teamname": "BVB"
      },
      {
          "id": 2,
          "games": [
              {
                  "id": 1,
                  "date": 20180810
              }
          ],
          "teamname": "FCB"
      }
  ]
}

关于如何使用第一个和第二个下拉菜单的值设置 ng-model(游戏)有什么建议吗？谢谢

我已经添加了我想要的表单的屏幕截图:

Answer 1

如果我理解的很好，当你向 postman 提出请求时，你发送这个:

{
    "date": 20180810,
    "teams": [{"id": 1}, {"id": 2}]
}

但是你的 Angular 形式实际上是在发送这个:

{
    "date": "20180810"
    "teams": {
        "0": {
            "id": 1,
            "games": [
                {
                    "id": 1,
                    "date": 20180810
                }
            ],
            "teamname": "BVB"
        },
        "1": {
            "id": 2,
            "games": [
                {
                    "id": 1,
                    "date": 20180810
                }
            ],
            "teamname": "FCB"
        }
    }
}

虽然 date 看起来不错，但您的 teams 是一个对象，但您的后端需要一个数组。您的团队中还有其他信息(例如 games 和 teamname，但我不知道这是否是您后端的问题。

大多数时候 Angularjs 的这种问题不在 html 模板中，而是在 Controller 中。在你的 Controller 中你应该有这样的东西:

scope.game = {
    date: 'something',
    teams: []
};

我认为您的问题是您没有将 scope.game.teams 正确初始化为数组。所以 ng-model 只需用一个对象自行初始化它。