CODEWITHSUNDEEP
angularjs
Arabinda
Arabinda

Reputation: 169

All select drop-down options in ng-repeat is showing the same value in AngularJS

I am trying to create a drop down menu from a JSon record and changing a price tag on selection of a option from it.If there is only record then drop down options are coming properly and price also getting changed on change of drop-down option

but if there are more records in JSon all select options showing the last JSon record value in drop down.Also changing a drop-down option changing all record's price tag .

Please suggest how I can separate the options based on JSon and each record's price tag should change based on change of its related select option . Find my current code below.

    <!DOCTYPE html >

<html ng-app="autoSuggestPOC">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">  
<script>
var searchApp = angular.module('autoSuggestPOC', ['ui.bootstrap']);
searchApp.controller('packageController', function($scope){

$scope.listPackage=[{"packageRoomTypeWithPriceList":[{"roomTypeName":"General","packagePriceVOList":[{"packagePriceId":1383,"price":"18000"}]},{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]},{"roomTypeName":"Private","packagePriceVOList":[{"packagePriceId":1385,"price":"27000"}]}]},{"packageRoomTypeWithPriceList":[{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]}]},{"packageRoomTypeWithPriceList":[{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]},{"roomTypeName":"Private","packagePriceVOList":[{"packagePriceId":1385,"price":"27000"}]}]}];

$scope.updateRoomandPrice = function (roomTypeWithPrice) {
    console.log(roomTypeWithPrice+'=========>');
    $scope.rooms = roomTypeWithPrice;

    $scope.thePrice = $scope.rooms[0].packagePriceVOList[0].price;
    $scope.theRoomType = $scope.rooms[0].roomTypeName;
};

$scope.updatePrice = function (price,roomType) {
    $scope.thePrice = price;
    $scope.theRoomType = roomType;
};
});
</script>
</head>
<body>
<div ng-controller="packageController">
<div ng-repeat="package in listPackage">
<table class="table">
<tr>
<td style="width:35%;">
    <h3 ng-init='updateRoomandPrice(package.packageRoomTypeWithPriceList)'>{{thePrice}}</h3>

    <div class="btn-group" dropdown is-open="status.isopen">
    <button id="single-button" type="button" class="btn btn-default" dropdown-toggle ng-disabled="disabled">
    {{theRoomType}} <span class="caret"></span>
    </button>   
    <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
    <li role="menuitem" ng-repeat="room in rooms">
    <a href="" ng-click="updatePrice(room.packagePriceVOList[0].price,room.roomTypeName)">{{room.roomTypeName}}</a>
    </li>
    </ul>                     
    </div>          
</td>
</tr>
</table>
</div>  
</div>
</body>
</html>

Thanks

Upvotes: 1

Views: 1478

Answers (1)

Shak Ham
Shak Ham

Reputation: 1269

There are several ways you can achieve this. With a directive, using a controller per ng repeat. I do suggest to study angular more.

Here's the code that may help a little. I'm passing the package, you can also pass the index (using $index) and locate it in your updatePrice function.

  <!DOCTYPE html >

<html ng-app="autoSuggestPOC">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">  
<script>
var searchApp = angular.module('autoSuggestPOC', ['ui.bootstrap']);
searchApp.controller('packageController', function($scope){

$scope.listPackage=[{"packageRoomTypeWithPriceList":
   [{"roomTypeName":"General","packagePriceVOList":  [{"packagePriceId":1383,"price":"18000"}]},
    {"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]},
    {"roomTypeName":"Private","packagePriceVOList":[{"packagePriceId":1385,"price":"27000"}]}]}

  ,{"packageRoomTypeWithPriceList":[{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]}]},{"packageRoomTypeWithPriceList":[{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]},{"roomTypeName":"Private","packagePriceVOList":[{"packagePriceId":1385,"price":"27000"}]}]}];

$scope.updateRoomandPrice = function (roomTypeWithPrice) {
    console.log(roomTypeWithPrice+'=========>');
    $scope.rooms = roomTypeWithPrice;

    $scope.thePrice = $scope.rooms[0].packagePriceVOList[0].price;
    $scope.theRoomType = $scope.rooms[0].roomTypeName;
};

$scope.updatePrice = function (package, price,roomType) {
    package.thePrice = price;
    package.theRoomType = roomType;
};
});
</script>
</head>
<body>
<div ng-controller="packageController">
<div ng-repeat="package in listPackage">
<table class="table">
<tr>
<td style="width:35%;">
    <h3 ng-init='updateRoomandPrice(package.packageRoomTypeWithPriceList.roomTypeName)'>
      {{package.thePrice}}</h3>
    <div class="btn-group" dropdown is-open="status.isopen">
    <button id="single-button" type="button" class="btn btn-default" dropdown-toggle ng-disabled="disabled">
    {{package.theRoomType}} <span class="caret"></span>
    </button>   
    <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
    <li role="menuitem" ng-repeat="room in package.packageRoomTypeWithPriceList">
    <a href="" ng-click="updatePrice(package, room.packagePriceVOList[0].price,room.roomTypeName)">{{room.roomTypeName}}</a>
    </li>
    </ul>                     
    </div>          
</td>
</tr>
</table>
</div>  
</div>
</body>
</html>

Upvotes: 1

Related Questions