Sunday, 8 January 2017

DYNAMICALLY BIND NG-MODEL WITH HELP OF 2 DIMENSIONAL ARRAY IN DROP DOWN IN ANGULAR

---------------------------------------------------------------------------------------------------------
                                                              HTML PAGE
----------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
    <script src="JS/App.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <table>
            <tr>
                <td ng-repeat="(bid,bound) in RtResponse">
                    <div ng-repeat="(sid,s) in bound.segs">
                        <div ng-repeat="(lid,l) in s.bonds[0].legs">
                            <select ng-model="values[bid][lid]" ng-change="Calculate();">
                                <option ng-value="0">0</option>
                                <option ng-value="10">10</option>
                                <option ng-value="20">20</option>
                                <option ng-value="30">30</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    {{Sum}}
                </td>
            </tr>
        </table>
    </div>
</body>
</html>


-------------------------------------------------------------------------------------------------------------------
                                                        App.js SCRIPT
-------------------------------------------------------------------------------------------------------------------
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.RtResponse = [{ "segs": [{ "bonds": [{ "legs": [{"air1":1}, {"air2":2}]}] }] },
        {"segs": [{ "bonds": [{ "legs": [{"air1":1}, {"air2":2}]}] }]}]
    //$scope.multipaleDropDown = ["dpO", "dpI"];
    $scope.values = {};
    $scope.Calculate = function ()
    {
        console.log($scope.values);
        $scope.Sum = 0;
        angular.forEach($scope.values, function (value1, key1) {
            angular.forEach(value1, function (value2, key2) {
              $scope.Sum = $scope.Sum + value2;
            });
        });
    }
});

No comments:

Post a Comment