Question

我想在angularjs中以2 select显示一个json。

为此，我从服务器下面得到了json：

$scope.bolouks：

{
  "dbId": 1,
  "boloukCode": "1-11-1",
  "north":  "...",
  "west":  "...",
  "radifs": [
    {
      "dbId": 1,
      "description": "...",
      "price": 698000
    },
    {
      "dbId": 2,
      "description":  "...",
      "price": 604000
    },
  ]
}

我希望在select中显示此json的第一部分，并在其他radifs中显示select。

为此，我尝试下面的代码，但我没有成功管理第二个select：

<select ui-select2 name="bolouk" class="ui-select2" ng-model="br.bolouk" required ng-options="bolouk.dbId as bolouk.boloukCode for bolouk in bolouks">
   <option value=""></option>
 </select>
<select ui-select2 name="radif" class="ui-select2" ng-model="br.radif" ng-change="br.radif" required ng-options="radif.dbId as radif.description for radif in bolouks[br.bolouk].radifs">
  <option value=""></option>
</select>

我希望在第二个选择（$index）中使用bolouks ng-repeat="radif in bolouks[$index].radifs"，但这不正确。如何将index的{{1}}传递给第二个选择？

Answer 1

仅ng-repeat支持$index，而非ng-options

级联选择的最简单方法是简单地将ng-model设置为选定的“bolouk”，然后让第二个选择关闭选定的“bolouk”“radifs”。

<select ui-select2 name="bolouk" class="ui-select2" ng-model="br.bolouk" required ng-options="bolouk.boloukCode for bolouk in bolouks">
   <option value=""></option>
 </select>
<select ui-select2 name="radif" class="ui-select2" ng-model="br.radif" ng-change="br.radif" required ng-options="radif.dbId as radif.description for radif in br.bolouk.radifs">
  <option value=""></option>
</select>

这是fiddle显示类似的内容

Answer 2

您应该使用第一个选择中选择的Model并在第二个选择中使用它。

例如：

<div ng-controller="MyCtrl">
    <select ng-model="firstChoise" ng-options="item as item.name for item in complexArray"></select>

    <select ng-model="secondChoise" ng-options="item for item in firstChoise.array"></select>
</div> 

function MyCtrl($scope) {
    $scope.complexArray = [
        {name: "A", array: ["A1", "A2", "A3"]},
        {name: "B", array: ["B1", "B2", "B3"]},
        {name: "C", array: ["C1", "C2", "C3"]}
    ];
}

这是 JSFiddle 以及工作示例。

如何将ng-repeat的$ index传递给Angularjs中的另一个ng-repeat

2 个答案: