块引用 如果我选择值750和1,750和2，它显示正确的结果是根据相应的选择从j son获取数据，但是在第二次选择的情况下，如果我从下拉选择1000和1或1000和2，则不从相应的选择中获取数据，其显示与750和1或750和2相同。
var app = angular.module('Calc', []);
//Start function for filter
app.filter('unique', function () {
return function (input, key) {
var unique = {};
var uniqueList = [];
for (var i = 0; i < input.length; i++) {
if (typeof unique[input[i][key]] == "undefined") {
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
//End function for filter
app.controller('Calc_Ctrl', function ($scope, $http) {
$scope.testdata = {
"options" : [{
"areaPerStorey" : 750,
"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 1,
"totalBuiltUpArea" : 750,
"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 9,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 13,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 7,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 9,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 4,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 42
},
{
"areaPerStorey" : 750,
"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 2,
"totalBuiltUpArea" : 1500,
"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 24,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 22,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 34,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 8,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 6,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 94
},
{
"areaPerStorey" : 1000,
"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 1,
"totalBuiltUpArea" : 1000,
"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 16,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 16,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 14,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 7,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 5,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 58
},
{
"areaPerStorey" : 1000,
"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 2,
"totalBuiltUpArea" : 2000,
"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 33,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 25,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 25,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 24,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 14,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 121
},
],
}
});<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="newscript.js"></script>
<body>
<div ng-app="Calc" ng-controller="Calc_Ctrl">
<div class = "col-lg-8 col-md-7 col-sm-7 col-xs-12 center-output " ng-app="Calc" ng-controller="Calc_Ctrl" >
<div class="row" style="margin-top:0px !important">
<div class="col-md-12 cat-image">
<img class="img-responsive" src='../../images/blockwork_banner.jpg'>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 step-1">
<div class="row select-box">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="form-group">
<h6>Select Area</h6>
<select class="form-control" id="sel1" ng-model="selectedtype" ng-options="y.areaPerStorey for (x, y) in testdata.options | unique: 'areaPerStorey' ">
</select>
<span class="arrow"></span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="form-group">
<h6>Select Number</h6>
<select class="form-control" id="sel2" ng-disabled="!selectedtype" ng-model="selectedsize" ng-options="y.numberOfStorey for (x, y) in testdata.options | unique: 'numberOfStorey' ">
</select>
<span class="arrow"></span>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 step-2">
<div class="col-md-12 col-sm-12 col-xs-12 step-result no-gap top-gap bottom-gap grey-box">
<div class="final-heading">Material Required</div>
<div class="col-md-12 no-gap">
<div class="col-md-12" style="border-bottom: 2px solid #989898;background-color: #fff;">
<p><b>Total Built Up Area is</b> <span style="font-size: 16pt;color: #BD4931;margin-left: 5px;font-style: normal;">{{((selectedtype.areaPerStorey) * (selectedsize.numberOfStorey)) | number:0}}</span><span class="small-text" style="font-style: normal">Sqft</span></p>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 step-2">
<div class="table-responsive rebar-table-div">
<table class="table table-condensed rebar-table">
<thead>
<tr class="trh">
<th><b>Dia Of TMT Steel</b></th>
<th><b>No Of Bundles</b></th>
<th><b>Estimated Weight(MT)</b></th>
</tr>
</thead>
<tbody>
<tr class="trb">
<td>8 mm</td>
<td><h3>{{selectedsize.noOfBundles8mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedsize.noOfBundles8mm * selectedsize.weightOfBundles8mm) | number : 3}} <label>MT</label></h3></td>
</tr>
<tr class="trb">
<td>10 mm</td>
<td><h3>{{selectedsize.noOfBundles10mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedsize.noOfBundles10mm * selectedsize.weightOfBundles10mm) | number : 3}} <label>MT</label></h3></td>
</tr>
<tr class="trb">
<td>12 mm</td>
<td><h3>{{selectedsize.noOfBundles12mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedsize.noOfBundles12mm * selectedsize.weightOfBundles12mm)| number : 3}} <label>MT</label></h3></td>
</tr>
<tr class="trb">
<td>16 mm</td>
<td><h3>{{selectedsize.noOfBundles16mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedsize.noOfBundles16mm * selectedsize.weightOfBundles16mm) | number : 3}} <label>MT</label></h3></td>
</tr>
<tr class="trb">
<td>20 mm</td>
<td><h3>{{selectedsize.noOfBundles20mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedsize.noOfBundles20mm * selectedsize.weightOfBundles20mm) | number : 3}} <label>MT</label></h3></td>
</tr>
</div>
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
我会使用ng-change来使用控制器方法。然后，如果其中一个选择框发生变化，您就可以触发过滤器。
你可以用绑定来做，但我找不到你的代码。
我稍微修改了你的数据结构，因为它看起来太复杂了，但你的数据结构可能也可以。
另请注意，html标记中存在不平衡标记。 （我没有检查过它。）
请查看下面的演示或此jsfiddle。
var app = angular.module('Calc', []);
//Start function for filter
app.filter('unique', function () {
return function (input, key) {
var unique = {};
var uniqueList = [];
for (var i = 0; i < input.length; i++) {
if (typeof unique[input[i][key]] == "undefined") {
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
console.log(uniqueList)
return uniqueList;
};
});
//End function for filter
app.controller('Calc_Ctrl', function ($scope, $http) {
$scope.numStoreys = [1,2];
$scope.areaPerStorey = [750,1000];
$scope.selectedProp = {};
$scope.testdata = {
"areaPerStoreyUnit" : "sqft",
"totalBuiltUpAreaUnit" : "sqft",
"areaPerStorey" : [{
size: 750,
properties:
[{
//"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 1,
"totalBuiltUpArea" : 750,
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 9,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 13,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 7,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 9,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 4,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 42
},
{
//"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 2,
"totalBuiltUpArea" : 1500,
//"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 24,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 22,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 34,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 8,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 6,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 94
}]
}, {
size: 1000,
properties: [
{
"numberOfStorey" : 1,
"totalBuiltUpArea" : 1000, // cacl size * number
//"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 16,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 16,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 14,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 7,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 5,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 58
},
{
//"areaPerStorey" : 1000,
//"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 2,
"totalBuiltUpArea" : 2000,
//"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 33,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 25,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 25,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 24,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 14,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 121
},
]
}]
};
$scope.updateProps = function() {
var prop = {},
areaPerStoreyObj = {};
//$scope.selectedProp
/*$scope.testdata = {
"areaPerStoreyUnit" : "sqft",
"totalBuiltUpAreaUnit" : "sqft",
"areaPerStorey" : [{
size: 750,
properties:*/
for(var i=0; i < $scope.testdata.areaPerStorey.length; i++) {
areaPerStoreyObj = $scope.testdata.areaPerStorey[i];
console.log(i, areaPerStoreyObj, $scope.selectedtype);
if ( areaPerStoreyObj.size == $scope.selectedtype ) {
//console.log('props', areaPerStoreyObj
//.properties);
for (var j=0; j < areaPerStoreyObj
.properties.length; j++) {
prop = areaPerStoreyObj.properties[j];
if ( prop.numberOfStorey == $scope.selectedsize ) {
$scope.selectedProp = prop;
}
}
}
}
};
/* org dataa --> $scope.testdata = {
"options" : [{
"areaPerStorey" : 750,
"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 1,
"totalBuiltUpArea" : 750,
"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 9,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 13,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 7,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 9,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 4,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 42
},
{
"areaPerStorey" : 750,
"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 2,
"totalBuiltUpArea" : 1500,
"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 24,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 22,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 34,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 8,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 6,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 94
},
{
"areaPerStorey" : 1000,
"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 1,
"totalBuiltUpArea" : 1000,
"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 16,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 16,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 14,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 7,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 5,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 58
},
{
"areaPerStorey" : 1000,
"areaPerStoreyUnit" : "sqft",
"numberOfStorey" : 2,
"totalBuiltUpArea" : 2000,
"totalBuiltUpAreaUnit" : "sqft",
"diameterOfSteel8mm" : 8,
"noOfBundles8mm" : 33,
"weightOfBundles8mm" : 0.047,
"diameterOfSteel10mm" : 10,
"noOfBundles10mm" : 25,
"weightOfBundles10mm" : 0.052,
"diameterOfSteel12mm" : 12,
"noOfBundles12mm" : 25,
"weightOfBundles12mm" : 0.053,
"diameterOfSteel16mm" : 16,
"noOfBundles16mm" : 24,
"weightOfBundles16mm" : 0.057,
"diameterOfSteel20mm" : 20,
"noOfBundles20mm" : 14,
"weightOfBundles20mm" : 0.059,
"totalSteelBundlesRequired" : 121
},
],
}*/
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Calc" ng-controller="Calc_Ctrl">
<div class = "col-lg-8 col-md-7 col-sm-7 col-xs-12 center-output " ng-app="Calc" ng-controller="Calc_Ctrl" >
<div class="row" style="margin-top:0px !important">
<div class="col-md-12 cat-image">
<img class="img-responsive" src='../../images/blockwork_banner.jpg'>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 step-1">
<div class="row select-box">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="form-group">
<h6>Select Area</h6>
<select class="form-control" id="sel1" ng-model="selectedtype" ng-options="area for area in areaPerStorey" ng-change="updateProps()">
</select>
<span class="arrow"></span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="form-group">
<h6>Select Number</h6>
<select class="form-control" id="sel2" ng-disabled="!selectedtype" ng-model="selectedsize" ng-options="num
for num in numStoreys" ng-change="updateProps()">
</select>
<span class="arrow"></span>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 step-2">
<div class="col-md-12 col-sm-12 col-xs-12 step-result no-gap top-gap bottom-gap grey-box">
<div class="final-heading">Material Required</div>
<div class="col-md-12 no-gap">
<div class="col-md-12" style="border-bottom: 2px solid #989898;background-color: #fff;">
<p><b>Total Built Up Area is</b> <span style="font-size: 16pt;color: #BD4931;margin-left: 5px;font-style: normal;">{{((selectedtype) * (selectedsize)) | number:0}}</span><span class="small-text" style="font-style: normal">Sqft</span></p>{{selectedProp}}
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 step-2">
<div class="table-responsive rebar-table-div">
<table class="table table-condensed rebar-table">
<thead>
<tr class="trh">
<th><b>Dia Of TMT Steel</b></th>
<th><b>No Of Bundles</b></th>
<th><b>Estimated Weight(MT)</b></th>
</tr>
</thead>
<tbody>
<tr class="trb">
<td>8 mm</td>
<td><h3>{{selectedProp.noOfBundles8mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedProp.noOfBundles8mm * selectedProp.weightOfBundles8mm) | number : 3}} <label>MT</label></h3></td>
</tr>
<tr class="trb">
<td>10 mm</td>
<td><h3>{{selectedProp.noOfBundles10mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedProp.noOfBundles10mm * selectedProp.weightOfBundles10mm) | number : 3}} <label>MT</label></h3></td>
</tr>
<tr class="trb">
<td>12 mm</td>
<td><h3>{{selectedProp.noOfBundles12mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedProp.noOfBundles12mm * selectedProp.weightOfBundles12mm)| number : 3}} <label>MT</label></h3></td>
</tr>
<tr class="trb">
<td>16 mm</td>
<td><h3>{{selectedProp.noOfBundles16mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedProp.noOfBundles16mm * selectedProp.weightOfBundles16mm) | number : 3}} <label>MT</label></h3></td>
</tr>
<tr class="trb">
<td>20 mm</td>
<td><h3>{{selectedProp.noOfBundles20mm}} <label>Bundles</label></h3></td>
<td><h3>{{(selectedProp.noOfBundles20mm * selectedProp.weightOfBundles20mm) | number : 3}} <label>MT</label></h3></td>
</tr>
</div>
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>