显示一个由ng-repeat选择的选项（AngularJS）

Question

我正在尝试创建一个包含两个或三个选项的选择列表，这取决于ng-repeat中的第一个选择的选项。 当客户在第一个选项“球型摄像机”中选择时，第二个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-change ng-model可以轻松实现

<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选择的选项（AngularJS）

问题描述

3 个解决方案

解决方案1
0 2016-07-12 19:56:36

解决方案2
0 2016-07-12 20:13:04

解决方案3
0 已采纳 2016-07-12 22:59:39

显示一个由ng-repeat选择的选项（AngularJS）

问题描述

3 个解决方案

解决方案1 0 2016-07-12 19:56:36

解决方案2 0 2016-07-12 20:13:04

解决方案3 0 已采纳 2016-07-12 22:59:39

解决方案1
0 2016-07-12 19:56:36

解决方案2
0 2016-07-12 20:13:04

解决方案3
0 已采纳 2016-07-12 22:59:39