显示一个ng-repeat select选项（AngularJS）

我想用两个或三个选项作出选择列表，这取决于ng-repeat中的第一个选定选项。当客户在第一个选项“半球摄像机”中选择时，根据列出的安装项目（在这种情况下：屋顶，墙壁和杆），第二次重复应该只列出两个选项。显示一个ng-repeat select选项（AngularJS）

有人可以帮助我吗？

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

来源

2016-07-12 Dennis Klarenbeek

如果回答这些问题的解决你的问题，你可以随时将其标记通过检查刻度为接受它旁边 –

首先，你的数据结构是不正确的，我觉得你mountingobject其实是一个array，使我改变了它。

要点1：我极力推荐您使用ngOptions而不是ngRepeat。 ngOptions正好代表<select>标记。

点2：你并不需要使用ngChange指令或$watch像有些人建议的，你只需要设置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" 
 
     } 
 
    ]; 
 
    });

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

来源

2016-07-12 22:59:39 developer033

谢谢developer033 ，这对我来说很不错。 –

这会帮助你https://stackoverflow.com/a/22017098/1703519

基本上你添加一个NG-改变功能的选择框，并从那里你可以改变第二个选择列表正在动态查看的选项列表。

看从这个答案小提琴看到一个类似的例子（不完全的情况下，但接近）

来源

2016-07-12 19:56:36 labago

所以，如果我理解正确的话，你想第二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']; 
    } 
}

来源

2016-07-12 20:13:04

显示一个ng-repeat select选项（AngularJS）

回答

相关问题