块引用 我在输出部分有以下项目，只有当我从drop dwon list中选择一个等级：选项选择RMC时才需要显示最后一项RMC。如何在rmc从下拉列表中选择时只显示RMC的条件其他项目将根据其他选择显示。
var app = angular.module('Calc', []);
app.controller('Calc_Ctrl', function ($scope) {
/* Start constants declaration*/
$scope.wastage_percentage = {percent : "0.05"}
/*End constants declaration*/
// ecah coff is different based on grade selection,so all constant cofficent is decleared inside as concreatecoeff.CoffName inside grade dropdown list
$scope.type = {
"Rectangular Footing" : {M20: "M20 (1:1.5:3)", M25 : "M25 (1:1:2)", RMC : "RMC",
M20:{
"concreatecoeff" : {cement : "0.03", sand : "0.01", mm_aggregate20 : "0.02", mm_aggregate12 : "0.01"},
},
M25:{
"concreatecoeff" : {cement : "0.35", sand : "0.01", mm_aggregate20 : "0.02", mm_aggregate12 : "0.01"},
},
RMC:{
"concreatecoeff" : { rmc : "1.05"},
}},
"Roof Beam/Plinth Beam" : {M20: "M20 (1:1.5:3)", RMC : "RMC",
M20:{
"concreatecoeff" : {cement : "0.03", sand : "0.01", mm_aggregate20 : "0.02", mm_aggregate12 : "0.01"},
},
RMC:{
"concreatecoeff" : { rmc : "1.05"},
}},
"Rectangular / Square cloumns" : {M20: "M20 (1:1.5:3)", RMC : "RMC",
M20:{
"concreatecoeff" : {cement : "0.03", sand : "0.01", mm_aggregate20 : "0.02", mm_aggregate12 : "0.01"},
},
RMC:{
"concreatecoeff" : { rmc : "1.05"},
}},
"Round/circular columns" : {M20: "M20 (1:1.5:3)",
M20:{
"concreatecoeff" : {cement : "0.03", sand : "0.01", mm_aggregate20 : "0.02", mm_aggregate12 : "0.01"},
}},
"Roof Slab" : {M20: "M20 (1:1.5:3)", RMC : "RMC",
M20:{
"concreatecoeff" : {cement : "0.03", sand : "0.01", mm_aggregate20 : "0.02", mm_aggregate12 : "0.01"},
},
RMC:{
"concreatecoeff" : { rmc : "1.05"},
}},
};
/*Start user input values and Function to add/remove input fields*/
$scope.choices = [{id : 'choice1', nf : 0,l2 : 0, b2 : 0, t2 : 0
}];
$scope.addNewChoice = function () {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({
'id' : 'choice' + newItemNo
});
};
$scope.removeChoice = function () {
var lastItem = $scope.choices.length - 1;
$scope.choices.splice(lastItem);
};
$scope.sum = function () {
var sum = 0;
angular.forEach($scope.choices, function (choice) {
sum += choice.nf * choice.l2 * choice.b2 *choice.t2;
});
return sum;
}
/*End user input values and Function to add/remove input fields*/
/*Start function to select units*/
$scope.change = function () {
if ($scope.data.previousSel != $scope.data.selectedOption) {
if ($scope.data.selectedOption.name == 'feet') {
var feets = $scope.data.previousSel.id * $scope.data.selectedOption.id;
angular.forEach($scope.choices, function (choice) {
choice.l2 = feets * choice.l2;
choice.b2 = feets * choice.b2;
choice.t2 = feets * choice.t2;
choice.nf = feets * choice.nf;
});
}
if ($scope.data.selectedOption.name == 'mtrs') {
var mtrs = $scope.data.previousSel.id / $scope.data.selectedOption.id;
angular.forEach($scope.choices, function (choice) {
choice.l2 = choice.l2 / mtrs;
choice.b2 = choice.b2 / mtrs;
choice.t2 = choice.t2 / mtrs;
choice.nf = choice.nf / mtrs;
});
}
$scope.data.previousSel = $scope.data.selectedOption;
}
};
$scope.data = {
availableOptions : [{
id : '1',
name : 'mtrs'
}, {
id : '3.28',
name : 'feet'
}],
previousSel : {
id : '1',
name : 'mtrs'
},
selectedOption : {
id : '1',
name : 'mtrs'
} //This sets the default value of the select in the ui
};
/*End function to select units*/
});<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="concreate_rcc.js"></script>
<body>
<fieldset>
<div ng-app="Calc" ng-controller="Calc_Ctrl">
<!--Start Input calculation-->
<br> <b>Input</b><br>
<p>Select a unit:</p>
<select ng-change="change()" ng-model="data.selectedOption" ng-options="option.name for option in data.availableOptions track by option.id">
</select>
<p>Select a pattern:</p>
<select ng-model="selectedpattern" ng-options="x for (x, y) in type" >
</select>
<p>Select a Grade:</p>
<select ng-model="selectedgrade" ng-options="x for (x, y) in selectedpattern">
</select>
<p>Enter the Details</p>
<form data-ng-repeat="choice in choices">
<br> {{$index + 1}} :
NO of types:<input type="number" ng-model="choice.nt" />
NO of footings:<input type="number" ng-model="choice.nf" /><br><br>
Length:<input type="number" ng-model="choice.l2" />
width: <input type="number" ng-model="choice.b2" /><br><br>
Thickness: <input type="number" ng-model="choice.t2" />
Quantity:<input id="area" type="number" placeholder="Area" value="{{ choice.nf * choice.l2 * choice.b2 * choice.t2}}" />
<button ng-show="$last" ng-click="removeChoice()">-</button>
<button ng-click="addNewChoice()">+</button>
</form><br><br>
Total Quantity : {{ sum() | number:2}}
<!-- process part:
grade test: {{selectedgrade.concreatecoeff.cement}}
wastage_percentage: {{sum() * wastage_percentage.percent}}
RCC qty:{{sum() * wastage_percentage.percent + sum()}}-->
<br><br> <b>output</b>
cement:{{((sum() * wastage_percentage.percent + sum()) * (selectedgrade.concreatecoeff.cement)) | number:2}}<br>
sand:{{((sum() * wastage_percentage.percent + sum()) * (selectedgrade.concreatecoeff.sand))| number:2}}<br>
20mm aggregate:{{((sum() * wastage_percentage.percent + sum()) * (selectedgrade.concreatecoeff.mm_aggregate20))| number:2}}<br>
12mm aggregate:{{((sum() * wastage_percentage.percent + sum()) * (selectedgrade.concreatecoeff.mm_aggregate12))| number:2}}<br>
<!-- for rmc only,need to give condition:-->
RMC:{{((sum() * wastage_percentage.percent + sum()) * (selectedgrade.concreatecoeff.rmc))| number:2}}
<!--End output calculation-->
</fieldset>
</body>
</html>
答案 0 :(得分：0)
如何将你的RMC包裹起来：
<div ng-if="selectedgrade=='RMC'">[display of RMC]</div>
ng-if比ng-show更好，如果你没有选择RMC时会遇到未定义的值，它会向你的控制台发送垃圾邮件。