Question

我有一个角度视图，用户可以在选择中选择一个选项。（select的数据来自API，因此它是JSON对象。）

这是我的一个选择（不要看我的对象的结构）：

<select ng-options="team.logo as team.logo.title for team in teams"
        ng-model="live.metadata.teams.home.infos"
        class="form-control">
</select>

在我的控制器中，我有一个空模型，当客户端选择一个新选项时，该模型设置得很好。

select中存储在模型中的值是一个带有id，title等的JSON对象。

在此视图中，客户可以创建一个团队，一切正常。当客户想要编辑其中一个团队时，会出现问题。

我有与ng-options完全相同的选择（在另一个状态，[前一个视图的兄弟]＆＃34;编辑＆＃34;例如），但这次模型不是空的（它包含最近创建的具有完全相同结构的团队的JSON对象。所以我希望select取模型的值，例如在select中显示名称。

但没有出现。选择似乎与模型断开连接，但是当您在选择中选择另一个选项时，它会更好地更改模型，以便ng-options和ng-model同步良好。

我不知道它可以来自哪里......

（我猜它不是儿童范围的问题，我测试了它并没有改变）。

以下是API提供的对象示例：

{
    logo: {
        nid: "71",
        title: "Team Name 1",
        type: "team",
        logo: {
            src: "imageURL",
            alt: ""
        }
    }
},
{
    logo: {
        nid: "72",
        title: "Team Name 2",
        type: "team",
        logo: {
            src: "imageURL",
            alt: ""
        }
    }
}

Answer 1

问题是默认情况下，角度通过引用观察模型。为了克服这个问题，可以使用track by。由于嵌套对象（请参阅select as and track by documentation），它无法为您工作，为了解决此问题，我选择了“徽标”到另一个数组中。

这是工作演示https://jsfiddle.net/1a7s9xqb/

Answer 2

看看我的测试

angular.module('app', []).controller('test', test);
  
test.$inject = ['$scope'];

function test($scope) {
  $scope.teams = [{
    logo: {
      nid: "71",
      title: "Team Name 1",
      type: "team",
      logo: {
        src: "imageURL",
        alt: ""
      }
    }
  },
                  {
                    logo: {
                      nid: "72",
                      title: "Team Name 2",
                      type: "team",
                      logo: {
                        src: "imageURL",
                        alt: ""
                      }
                    }
                  }];
  
  $scope.selectedTeam = $scope.teams[0].logo;
  $scope.selectedTeam2 = { //logo
      nid: "71",
      title: "Team Name 1",
      type: "team",
      logo: {
        src: "imageURL",
        alt: ""
      }
    };
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test" >
  <select ng-options="team.logo as team.logo.title for team in teams"
          ng-model="selectedTeam"
          class="form-control">
  </select>
</div>

在您的方案中，您必须将徽标设置为模型。徽标必须与团队中的徽标相同。

Angular ng-options不是由模型设置的

2 个答案: