Angularjs - 如何根据动态表中的其他下拉列表更新下拉列表?

时间:2017-08-07 09:07:52

标签: javascript angularjs

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>

1 个答案:

答案 0 :(得分:0)

您可以检查代码中使用的循环吗,

$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));
                                }
for循环中的

条件似乎令人困惑,它应该是<=而不是!=