通过 ng-repeat select 选项显示一个 (AngularJS)

Question

我正在尝试制作一个包含两个或三个选项的 select 列表，这取决于 ng-repeat 中的第一个 selected 选项。当客户 selects 在第一个选项 "Dome Camera" 中时，第二个 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

这应该对你有帮助

基本上，您将一个 ng-change 函数添加到 select 框中，然后您可以从那里更改第二个 select 列表正在动态查看的选项列表。

查看该答案中的 fiddle 以查看类似的示例（不完全是您的场景，但接近）

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

首先，你的数据结构不正确，我认为你的mounting object其实是一个array，所以我改了。

要点 1： 我强烈建议您使用 ngOptions 而不是 ngRepeat。 ngOptions 是为 <select> 标签制作的。

要点 2： 你不需要像某些人建议的那样使用 ngChange 指令或 $watch，你只需要设置 ngModel，那么Angular就可以搞定了。

在操作中查看:

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

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <table>
    <tr>
      <td>
        <select class="form-control" name="camera-type" ng-options="camera.name for camera in cameraTypes" ng-model="camera">
          <option value="">Select a camera</option>
        </select>
      </td>
      <td ng-if="camera">
        <select class="form-control" name="mounting-type" ng-options="m.name for m in camera.mounting" ng-model="mounting">
          <option value="">Select a mounting</option>
        </select>
      </td>
    </tr>
  </table>
</body>

</html>

通过 ng-repeat select 选项显示一个 (AngularJS)

Show a by ng-repeat select option (AngularJS)

javascript

angularjs

ng-repeat