顯示一個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）

回答

相關問題