Question

我尝试使用两个或三个选项创建一个选择列表，这取决于ng-repeat中的第一个选定选项。当客户选择第一个选项＆＃34; Dome Camera＆＃34;根据列出的安装项目（在这种情况下：屋顶，墙壁和柱子），在第二个ng-repeat中应该只列出两个选项。

有人可以帮我吗？

<tr>
  <td>
    <select class="form-control" name="type-camera">
      <option ng-repeat="camera in cameraTypes">{{camera.name}}</option>
    </select>
  </td>
  <td>
    <select class="form-control" name="type-camera">
      <option ng-repeat="mounting in ?????">{{mounting}}</option>
    </select>
  </td>
</tr>

$ scope.cameraTyps看起来像：

"0": {
      "name": "Dome Camera",
      "price": 2975.67,
      "install": 4,
      "mounting": {
        "name": "roof",
        "name": "wall",
        "name": "pole"
      }
    },
    "1": {
      "name": "WV-SF135E",
      "price": 327.70,
      "install": 1.5,
      "mounting": {
        "name": "roof",
        "name": "wall"
      },
      "lens": "fixed"
    }

Answer 1

这可以帮助您https://stackoverflow.com/a/22017098/1703519

基本上，您可以在选择框中添加ng-change功能，然后您可以更改第二个选择列表动态查看的选项列表。

看看那个答案的小提琴，看一个类似的例子（不完全是你的场景，但是关闭）

Answer 2

因此，如果我理解正确，您想要使第二个ng-repeat的列表依赖于第一个列表中所选选项的选择吗？使用ng-model和ng-change

可以轻松实现这一目标

<tr>
  <td>
    <select class="form-control" name="type-camera" ng-model="selectedCamera" ng-change="onChangeCamera();">
      <option ng-repeat="camera in cameraTypes">{{camera.name}}</option>
    </select>
  </td>
  <td>
    <select class="form-control" name="type-camera">
      <option ng-repeat="mounting in mountingList">{{mounting}}</option>
    </select>
  </td>
</tr>

在您的控制器中：

$scope.onChangeCamera = function() {
  if($scope.selectedCamera.name === 'Dome Camera') {
    //For example
    $scope.mountingList = ['Roof', 'Wall', 'Pole'];
  }
}

Answer 3

首先，您的数据结构不正确，我认为您的ld: library not found for -lev mounting实际上是object，因此我对其进行了更改。

第1点：我建议您使用ngOptions代替array。 ngRepeat完全针对ngOptions代码制作。

第2点：您不需要像某些人建议的那样使用<select>指令或ngChange，您只需要设置$watch，然后 Angular 可以完成剩下的工作。

在操作中查看：

ngModel

angular.module('app', [])
  .controller('mainCtrl', function($scope) {
    $scope.cameraTypes = [  
       {  
          "name":"Dome Camera",
          "price":2975.67,
          "install":4,
          "mounting":[  
             {  
                "name":"roof"
             },
             {  
                "name":"wall"
             },
             {  
                "name":"pole"
             }
          ]
       },
       {  
          "name":"WV-SF135E",
          "price":327.70,
          "install":1.5,
          "mounting":[  
             {  
                "name":"roof"
             },
             {  
                "name":"wall"
             }
          ],
          "lens":"fixed"
       }
    ];
  });

显示ng-repeat选择选项（AngularJS）

3 个答案: