Question

目前我遇到了一个angularjs问题。以下情形：

我有一个游戏实体和一个团队实体。一个游戏可以容纳多个Team对象。（ManyToMany Relationship）

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

现在我无法为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

如果我理解得很清楚，当您向邮递员提出请求时，请发送此邮件：

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

但你的角色形式实际上发送了这个：

{
    "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模板中，而是在控制器中。在你的控制器中你应该有这样的东西：

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

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

Answer 2

根据我收集的内容，您希望为每个游戏添加多个团队，请按照清单模型，它可能是您想要的，https://vitalets.github.io/checklist-model/从那里您可以为服务器传递每个团队的游戏列表

在dropdownmenu angularjs中设置ng-model中的列表项

2 个答案: