Angularjs - 動的テーブルの他のドロップダウンに応じてドロップダウンを更新する方法は？

Question

var myAppRxCafe = angular.module('DescRxCafe', []); 
myAppRxCafe.controller('RxCafeController', ['$scope', '$http', function($scope, $http) { 
    $scope.RxItemDetailArray = []; 
    $http.get("/URL ") 
     .then(function(response) { 
      var itemListArray = response.data.records; 
      for (var i = 0; i != response.data.records.length; i++) { 
       $scope.RxItemDetailArray.push({ 
        'itemName': itemListArray[i].u_item_name, 
        'itemPrice': itemListArray[i].u_itemprice_decimal 
       }); 
       console.log('Data from Server- ' + JSON.stringify(response.data.records)); 
      } 
     }); 
    $scope.RxCafeObj = [{ 
     'rxCafeReqItem': '', 
     'rxCafeReqQty': 1, 
     'rxCafeReqTime': '', 
     'rxCafeReqOrderNotes': '', 
     'rxCafeReqPrice': 0, 
     'rxCafeReqTotalPrice': 0, 
    }]; 
    $scope.addRow = function() { 
     $scope.rxCafeReqItem = ''; 
     $scope.rxCafeReqQty = 1; 
     $scope.rxCafeReqTime = ''; 
     $scope.rxCafeReqOrderNotes = ''; 
     $scope.rxCafeReqPrice = 0; 
     $scope.rxCafeReqTotalPrice = 0; 
     $scope.RxCafeObj.push({ 
      'rxCafeReqItem': $scope.rxCafeReqItem, 
      'rxCafeReqQty': $scope.rxCafeReqQty, 
      'rxCafeReqTime': $scope.rxCafeReqTime, 
      'rxCafeReqOrderNotes': $scope.rxCafeReqOrderNotes, 
      'rxCafeReqPrice': $scope.rxCafeReqPrice, 
      'rxCafeReqTotalPrice': $scope.rxCafeReqTotalPrice, 
     }); 
    }; 
    $scope.updatePrice = function(itemSelected) { 
     $scope.availablePrice = []; 
     angular.forEach($scope.RxItemDetailArray, function(value) { 
      if (value.itemName == itemSelected) { 
       $scope.availablePrice.push(value.itemPrice); 
      } 
     }); 
    }; 
    $scope.removeRow = function($index) { 
     if ($index != 0) { 
      $scope.RxCafeObj.splice($index, 1); 
     } 
    }; 

}]); 

<div ng-app="DescRxCafe" ng-csp="no-unsafe-eval" id="divId2"> 
    <div ng-controller="RxCafeController"> 
     <table style="height: 28px;" width="430" class="table table-bordered" id="dataTable_RxCafeController"> 
      <tbody> 
       <tr> 
        <th>Requested Item</th> 
        <th>Quantity</th> 
        <th>Time</th> 
        <th>Order Notes</th> 
        <th>Price</th> 
        <th>Total Price(Qty * price * 0.06)</th> 
       </tr> 
       <tr ng-repeat="company in RxCafeObj"> 
        <td> 
         <select class="form-control input1" ng-model="rxItemName" name="rxCafeReqItem" id="selectedElectronicRec" ng-change="updatePrice(rxItemName)"> 
          <option value='none_RxCafeController_input'>None</option> 
          <option ng-repeat="v in RxItemDetailArray | orderBy:'itemName':false" value="{{v.itemName}}">{{v.itemName}}</option> 
         </select> 
        </td> 
        <td> 
         <input type="number" class="form-control input1" id="RxCafeController_input" ng-model="rxQty" value="{{company.rxCafeReqQty}}" name="rxCafeReqQty" /> 
        </td> 
        <td> 
         <input type="date" class="form-control input1" id="RxCafeController_input" name="rxCafeReqTime" /> 
        </td> 
        <td> 
         <input type="text" class="form-control input1" id="RxCafeController_input" name="rxCafeReqOrderNotes" /> 
        </td> 
        <td> 
         <select class="form-control input1" ng-model="rxPrice" name="rxCafeReqItemPrice" id="RxCafeController_input"> 
          <option ng-repeat="v in availablePrice " value="{{v}}" ng-selected="{{v}}">{{v}}</option> 
         </select> 
        </td> 
        <td> 
         <input type="number" class="form-control input1" id="RxCafeController_input" ng-model="rxTotalPrice" value="{{rxPrice*rxQty*0.06}}" ng-disabled="true" name="rxCafeReqTotalPrice" /> 
        </td> 

        <td> 
         <input type="button" value="Delete" ng-click="removeRow($index)" name="Delete" /> 
        </td> 
       </tr> 

      </tbody> 
     </table> 
     <input type="submit" class="button" id="dataTable2_input" value="Add another line" ng-click="addRow('')" /> 

    </div> 
</div> 

Answer 1

あなたはループのために、あなたのコード内で使用されるループのため

$http.get("/URL ").then(function(response) { 
           //$scope.RxCafeLocationArray = response.data.records; 
           var itemListArray= response.data.records; 
           for(var i=0;i!=response.data.records.length;i++){ 
            $scope.RxItemDetailArray.push({'itemName':itemListArray[i].u_item_name,'itemPrice':itemListArray[i].u_itemprice_decimal}); 
           console.log('Data from Server- '+JSON.stringify(response.data.records)); 
           } 

状態を確認することができます混乱と思われる、それは<=いうよりこんにちはサチン、応答が来ている!=