Javascript 在ng repeat中选择链接

我很难确定ng repeat中的范围。我想创建链式选择，我想让ng repeat中的每一行分别存在于不同的范围中。当前更改任何行中的第一个选择将更改所有行中的第二个选择

（现实生活中的例子：我有一个表单，我必须添加汽车，首先选择一个“制造”，从api中提取其“模型”，然后在第二个选择中显示模型。用户必须能够添加任意数量的汽车。）

HTML:

---

您需要为每行分隔

选项2

部分

一个简单的解决方案是只将其保存在row对象中，但您可能需要更复杂的数据结构

这里有一个简单的例子

HTML:

---

好的，这是我的最终解决方案。我意识到我可以从控制器访问ng repeat范围，方法是将repeat项作为ng change中的函数参数传递：

HTML:

我一直在想一种方法，将选项存储在ng repeat范围内的变量中，但这项工作做得非常好！谢谢！：）谢谢分享！如果我已经有了所有可能的选项，那么这确实是一种非常酷的方法，但是我必须查询一个api，以根据第一个选择获取第二个选择的选项。（我只是不想让这个例子过于复杂）-除非。。。Options2是一个数组，我使用ng change函数基于$index推送其中的内容。。。
<div ng-controller="MyCtrl">
  <div ng-repeat="row in rows">
    <select ng-options="option.value as option.title for option in options1" ng-model="row.select1" ng-change="updateSelect2(row.select1)"></select> 
    <select ng-options="option.value as option.title for option in options2" ng-model="row.select2"></select>
  </div>
  <a ng-click="addRow()">Add Row</a>
</div>

function MyCtrl($scope) {
  $scope.rows = [{}];
  $scope.options1 = [
    {title: 'Option 1', value: '1'},
    {title: 'Option 2', value: '2'},
    {title: 'Option 3', value: '3'}
  ];

  $scope.options2 = [];

  $scope.updateSelect2 = function(val) {
    if (val === '1') {
      $scope.options2 = [
        {title: 'A', value: 'A'},
        {title: 'B', value: 'B'}
      ];
    } else if (val === '2') {
      $scope.options2 = [
        {title: 'AA', value: 'AA'},
        {title: 'BB', value: 'BB'}
      ];
    } else {
      $scope.options2 = [
        {title: 'AAA', value: 'AAA'},
        {title: 'BBB', value: 'BBB'}
      ];
    }
  };

  $scope.addRow = function() {
    $scope.rows.push({});
  };
}

<div ng-repeat="row in rows">
  <select ng-options="option.value as option.title for option in options1" ng-model="row.select1" ng-change="updateSelect2(row.select1, $index)">  </select> 
  <select ng-options="option.value as option.title for option in row.options2" ng-model="row.select2"></select>
</div>

$scope.updateSelect2 = function(val, index) {
  if (val === '1') {
    $scope.rows[index].options2 = [
      {title: 'A', value: 'A'},
      {title: 'B', value: 'B'}
    ];
  } else if (val === '2') {
    $scope.rows[index].options2 = [
      {title: 'AA', value: 'AA'},
      {title: 'BB', value: 'BB'}
    ];
  } else {
    $scope.rows[index].options2 = [
      {title: 'AAA', value: 'AAA'},
      {title: 'BBB', value: 'BBB'}
    ];
  }
};

<div ng-controller="MyCtrl">
  <div ng-repeat="row in rows">
    <select ng-options="option.value as option.title for option in select1options" ng-model="row.select1" ng-change="updateSelect2(row.select1, row)"></select> 
    <select ng-options="option.value as option.title for option in row.options" ng-model="row.select2"></select>
  </div>
  <a ng-click="addRow()">Add Row</a>
</div>

function MyCtrl($scope) {
  $scope.rows = [{options:[]}];

  $scope.select1Options = [
    {title: 'Option 1', value: '1'},
    {title: 'Option 2', value: '2'},
    {title: 'Option 3', value: '3'}
  ];

  $scope.updateSelect2 = function(val, scope) {
    if (val === '1') {
      scope.options = [ //<-- this scope is the ng-repeat item's scope, from the function parameter
        {title: 'A', value: 'A'},
        {title: 'B', value: 'B'}
      ];
    } else if (val === '2') {
      scope.options = [
        {title: 'AA', value: 'AA'},
        {title: 'BB', value: 'BB'}
      ];
    } else {
      scope.options = [
        {title: 'AAA', value: 'AAA'},
        {title: 'BBB', value: 'BBB'}
      ];
    }
  };

  $scope.addRow = function() {
    $scope.rows.push({options:[]});
  };
}