Question

我正在尝试从JSon记录创建一个下拉菜单，并在选择一个选项时更改价格标签。如果只有记录，则下拉选项正常，价格也随着下降的变化而变化-down选项

但如果JSon中有更多记录，则所有选项都显示下拉列表中的最后一个JSon记录值。还要更改下拉选项，更改所有记录的价格标签。

请建议我如何基于JSon分离选项，并且每个记录的价格标签应根据其相关选择选项的更改而更改。在下面找到我当前的代码。

    <!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>

由于

Answer 1

有几种方法可以实现这一目标。使用指令，使用每ng重复的控制器。我建议更多地研究角度。

这里的代码可能会有所帮助。我传递了包，你也可以传递索引（使用$ index）并在updatePrice函数中找到它。

  <!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>

ng-repeat中的所有选择下拉选项在AngularJS中显示相同的值

1 个答案: