ng-repeat

Question

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

（现实生活中的例子：我有一个表格，我必须添加汽车，首先选择一个'Make'，从api中拉出'Models'，然后在第二个选择中显示模型。用户必须能够添加任何汽车数量。）

HTML：

<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>

JS：

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({});
  };
}

FIDDLE HERE

Answer 1

您需要为每一行分隔options2部分。

一个简单的解决方案是将其保存在行对象中，但您可能需要更精细的数据结构。

这是一个简单的example using your code。

HTML：

<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>

JS：

$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'}
    ];
  }
};

Answer 2

好的，这是我的最终解决方案。我意识到我可以通过在重复变换中将重复项作为函数参数传递来从控制器访问ng-repeat范围：

HTML：

<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>

JS：

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:[]});
  };
}

注意1：在$scope.rows数组中，我必须预先添加一个＆＃39;选项＆＃39;数组到每个对象。

注意2：在$scope.updateSelect2中，scope参数指的是ng-repeat项目的范围（在本例中为row），而且它不是{{} 1}}！

FIDDLE HERE