Javascript AngularJS选择/选项范围中断计算器
我有一个内置AngularJS的计算器,所有字段都很好用,除了选择/选项字段使结果不起作用。这是小提琴: 当我尝试将“颜色”放入$scope.normalize函数\u ref时,它会破坏结果。当我把它拿出来的时候,效果很好 代码也在这里——因为我认为它在小提琴中不起作用: HTML:Javascript AngularJS选择/选项范围中断计算器,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我有一个内置AngularJS的计算器,所有字段都很好用,除了选择/选项字段使结果不起作用。这是小提琴: 当我尝试将“颜色”放入$scope.normalize函数\u ref时,它会破坏结果。当我把它拿出来的时候,效果很好 代码也在这里——因为我认为它在小提琴中不起作用: HTML: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="utf-8"> &l
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/calc/angular.js"></script>
<script type="text/javascript" src="/calc/calculator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4 offset1">
<div id="calculator" ng-controller="Calculator">
<form class="form-horizontal">
<!-- Buffer for Growth -->
<div class="control-group">
<label class="control-label">Buffer for Growth (%)</label>
<div class="controls">
<input type="text" name="growthbuffer" ng-model="buffer_for_growth" ng-change="recalculate()">
</div>
</div>
<!-- Number of Cameras -->
<div class="control-group">
<label class="control-label">Number of Cameras</label>
<div class="controls">
<input type="text" name="cameras" ng-model="camera_count" ng-change="recalculate()">
</div>
</div>
<!-- FPS -->
<div class="control-group">
<label class="control-label">FPS</label>
<div class="controls">
<input type="text" name="fps" ng:format="number" ng-model="fps" ng-change="recalculate()">
</div>
</div>
<!-- Bitrate -->
<div class="control-group">
<label class="control-label">Bitrate</label>
<div class="controls">
<input type="text" name="bitrate" ng:format="number" ng-model="bitrate" ng-change="recalculate()">
</div>
</div>
<!-- Recorded Hours -->
<div class="control-group">
<label class="control-label">Recorded Hours</label>
<div class="controls">
<input type="text" name="recordedhours" ng:format="number" ng-model="recorded_hours" ng-change="recalculate()">
</div>
</div>
<!-- Motion Percentage -->
<div class="control-group">
<label class="control-label">Motion Percentage</label>
<div class="controls">
<input type="text" name="motion_percentage" ng:format="number" ng-model="motion_percentage" ng-change="recalculate()">
</div>
</div>
<!-- Days Retained -->
<div class="control-group">
<label class="control-label">Retention (days)</label>
<div class="controls">
<input type="text" name="daysretained" ng-model="days_retained" ng-change="recalculate()">
</div>
</div>
<!-- Compression -->
<div class="control-group">
<label class="control-label">Compression</label>
<div class="controls">
<select ng-model="color" ng-options="c.name for c in colors"></select><br>
</select>
<!--<select name="compression" ng-model="video_compression" ng-change="recalculate()">
<option value="MJPEG">MJPEG</option>
<option value="MPEG4">MPEG4</option>
<option value="H.264">H.264</option>
</select>-->
</div>
</div>
</form>
<div id="display">
Bandwidth:<br>
{{ bandwidth|number:0 }} Mbps <span class="percent">
<br><br><br><br>
Live Storage:<br>
{{ livestorage|number:2 }} GB <span class="percent">
<br><br><br><br>
Storage:<br>{{ earnings_percent|number:2 }}%</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
// Generated by CoffeeScript 1.6.1
(function() {
window.Calculator = function($scope) {
$scope.earnings_dollar = 0.00;
$scope.earnings_percent = 0.00;
$scope.camera_count = "42";
$scope.bitrate = "2000";
$scope.fps = "10";
$scope.recorded_hours = "24";
$scope.motion_percentage = "30";
$scope.days_retained = "30";
$scope.number_days_recorded = "4.95";
$scope.colors = [
{name:'mjpeg', shade:'dark'},
{name:'mpeg4', shade:'light'},
{name:'h264', shade:'dark'}
];
$scope.normalize = function() {
var control_group, num, out, prop, val, _i, _len, _ref;
out = {};
_ref = ['camera_count', 'fps', 'number_days_recorded', 'bitrate', 'recorded_hours', 'motion_percentage'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
prop = _ref[_i];
val = $scope[prop].replace("$", "");
num = parseFloat(val);
control_group = $("input[name='" + prop + "']").parent();
if (isNaN(num)) {
control_group.addClass("error");
return null;
} else {
control_group.removeClass("error");
out[prop] = num;
}
}
return out;
};
$scope.recalculate = function() {
var cost_basis, initial_camera_value, proceeds, props, trade_return;
props = $scope.normalize();
if (!props) {
return;
}
//bandwidth
storagekbs = props.fps * props.bitrate;
storagekbs = props.fps * props.bitrate;
ultstorage = props.camera_count * storagekbs;
bandwidth = ultstorage/1000;
$scope.bandwidth = bandwidth;
//live storage
storagekbithr = storagekbs*3600;
grossstorkbday = (storagekbithr * props.recorded_hours)/8;
grossstorgbday = grossstorkbday/1000000000;
motiongbcam = grossstorgbday * props.motion_percentage;
netgbday = motiongbcam * props.camera_count;
$scope.livestorage = netgbday * (props.recorded_hours / 24);
};
return $scope.recalculate();
};
}).call(this);
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="/calc/calculator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4 offset1">
<div id="calculator" ng-controller="Calculator">
<form class="form-horizontal">
<!-- Buffer for Growth -->
<div class="control-group">
<label class="control-label">Buffer for Growth (%)</label>
<div class="controls">
<input type="text" name="growthbuffer" ng-model="buffer_for_growth" ng-change="recalculate()"/>
</div>
</div>
<!-- Number of Cameras -->
<div class="control-group">
<label class="control-label">Number of Cameras</label>
<div class="controls">
<input type="text" name="cameras" ng-model="camera_count" ng-change="recalculate()"/>
</div>
</div>
<!-- FPS -->
<div class="control-group">
<label class="control-label">FPS</label>
<div class="controls">
<input type="text" name="fps" ng:format="number" ng-model="fps" ng-change="recalculate()"/>
</div>
</div>
<!-- Bitrate -->
<div class="control-group">
<label class="control-label">Bitrate</label>
<div class="controls">
<input type="text" name="bitrate" ng:format="number" ng-model="bitrate" ng-change="recalculate()"/>
</div>
</div>
<!-- Recorded Hours -->
<div class="control-group">
<label class="control-label">Recorded Hours</label>
<div class="controls">
<input type="text" name="recordedhours" ng:format="number" ng-model="recorded_hours" ng-change="recalculate()"/>
</div>
</div>
<!-- Motion Percentage -->
<div class="control-group">
<label class="control-label">Motion Percentage</label>
<div class="controls">
<input type="text" name="motion_percentage" ng:format="number" ng-model="motion_percentage" ng-change="recalculate()"/>
</div>
</div>
<!-- Days Retained -->
<div class="control-group">
<label class="control-label">Retention (days)</label>
<div class="controls">
<input type="text" name="daysretained" ng-model="days_retained" ng-change="recalculate()"/>
</div>
</div>
<!-- Compression -->
<div class="control-group">
<label class="control-label">Compression</label>
<div class="controls">
<select ng-model="color" ng-options="c.name for c in colors"></select>
</div>
</div>
<div id="display">
<span class="percent">
Bandwidth:
<br>
{{bandwidth|number:0}} Mbps
</span>
<span class="percent">
<br><br><br><br>
Live Storage:
<br>
{{livestorage|number:2}} GB
</span>
<span class="percent">
<br><br><br><br>
Storage:
<br>
{{earnings_percent|number:2}}%
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
function Calculator($scope) {
$scope.earnings_dollar = 0.00;
$scope.earnings_percent = 0.00;
$scope.bandwidth = 0;
$scope.camera_count = "42";
$scope.bitrate = "2000";
$scope.fps = "10";
$scope.recorded_hours = "24";
$scope.motion_percentage = "30";
$scope.days_retained = "30";
$scope.number_days_recorded = "4.95";
$scope.colors = [
{name:'mjpeg', shade:'dark'},
{name:'mpeg4', shade:'light'},
{name:'h264', shade:'dark'}
];
$scope.normalize = function() {
var control_group, num, out, prop, val, _i, _len, _ref;
out = {};
_ref = ['camera_count', 'fps', 'number_days_recorded', 'bitrate', 'recorded_hours', 'motion_percentage'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
prop = _ref[_i];
val = $scope[prop].replace("$", "");
num = parseFloat(val);
control_group = $("input[name='" + prop + "']").parent();
if (isNaN(num)) {
control_group.addClass("error");
return null;
}
else {
control_group.removeClass("error");
out[prop] = num;
}
}
return out;
};
$scope.recalculate = function() {
var cost_basis, initial_camera_value, proceeds, props, trade_return;
props = $scope.normalize();
if (!props) {
return;
}
//bandwidth
var storagekbs = props.fps * props.bitrate;
storagekbs = props.fps * props.bitrate;
var ultstorage = props.camera_count * storagekbs;
var bandwidth = ultstorage/1000;
$scope.bandwidth = bandwidth;
//live storage
var storagekbithr = storagekbs*3600;
var grossstorkbday = (storagekbithr * props.recorded_hours)/8;
var grossstorgbday = grossstorkbday/1000000000;
var motiongbcam = grossstorgbday * props.motion_percentage;
var netgbday = motiongbcam * props.camera_count;
$scope.livestorage = netgbday * (props.recorded_hours / 24);
};
};
计算器
增长缓冲(%)
摄像机数量
FPS
比特率
记录小时数
运动百分比
保留期(天)
压缩
带宽:
{{带宽|数量:0}}Mbps
实时存储:
{{livestorage}编号:2}}GB
存储:
{{收益百分比}数量:2}}%
JS:
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/calc/angular.js"></script>
<script type="text/javascript" src="/calc/calculator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4 offset1">
<div id="calculator" ng-controller="Calculator">
<form class="form-horizontal">
<!-- Buffer for Growth -->
<div class="control-group">
<label class="control-label">Buffer for Growth (%)</label>
<div class="controls">
<input type="text" name="growthbuffer" ng-model="buffer_for_growth" ng-change="recalculate()">
</div>
</div>
<!-- Number of Cameras -->
<div class="control-group">
<label class="control-label">Number of Cameras</label>
<div class="controls">
<input type="text" name="cameras" ng-model="camera_count" ng-change="recalculate()">
</div>
</div>
<!-- FPS -->
<div class="control-group">
<label class="control-label">FPS</label>
<div class="controls">
<input type="text" name="fps" ng:format="number" ng-model="fps" ng-change="recalculate()">
</div>
</div>
<!-- Bitrate -->
<div class="control-group">
<label class="control-label">Bitrate</label>
<div class="controls">
<input type="text" name="bitrate" ng:format="number" ng-model="bitrate" ng-change="recalculate()">
</div>
</div>
<!-- Recorded Hours -->
<div class="control-group">
<label class="control-label">Recorded Hours</label>
<div class="controls">
<input type="text" name="recordedhours" ng:format="number" ng-model="recorded_hours" ng-change="recalculate()">
</div>
</div>
<!-- Motion Percentage -->
<div class="control-group">
<label class="control-label">Motion Percentage</label>
<div class="controls">
<input type="text" name="motion_percentage" ng:format="number" ng-model="motion_percentage" ng-change="recalculate()">
</div>
</div>
<!-- Days Retained -->
<div class="control-group">
<label class="control-label">Retention (days)</label>
<div class="controls">
<input type="text" name="daysretained" ng-model="days_retained" ng-change="recalculate()">
</div>
</div>
<!-- Compression -->
<div class="control-group">
<label class="control-label">Compression</label>
<div class="controls">
<select ng-model="color" ng-options="c.name for c in colors"></select><br>
</select>
<!--<select name="compression" ng-model="video_compression" ng-change="recalculate()">
<option value="MJPEG">MJPEG</option>
<option value="MPEG4">MPEG4</option>
<option value="H.264">H.264</option>
</select>-->
</div>
</div>
</form>
<div id="display">
Bandwidth:<br>
{{ bandwidth|number:0 }} Mbps <span class="percent">
<br><br><br><br>
Live Storage:<br>
{{ livestorage|number:2 }} GB <span class="percent">
<br><br><br><br>
Storage:<br>{{ earnings_percent|number:2 }}%</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
// Generated by CoffeeScript 1.6.1
(function() {
window.Calculator = function($scope) {
$scope.earnings_dollar = 0.00;
$scope.earnings_percent = 0.00;
$scope.camera_count = "42";
$scope.bitrate = "2000";
$scope.fps = "10";
$scope.recorded_hours = "24";
$scope.motion_percentage = "30";
$scope.days_retained = "30";
$scope.number_days_recorded = "4.95";
$scope.colors = [
{name:'mjpeg', shade:'dark'},
{name:'mpeg4', shade:'light'},
{name:'h264', shade:'dark'}
];
$scope.normalize = function() {
var control_group, num, out, prop, val, _i, _len, _ref;
out = {};
_ref = ['camera_count', 'fps', 'number_days_recorded', 'bitrate', 'recorded_hours', 'motion_percentage'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
prop = _ref[_i];
val = $scope[prop].replace("$", "");
num = parseFloat(val);
control_group = $("input[name='" + prop + "']").parent();
if (isNaN(num)) {
control_group.addClass("error");
return null;
} else {
control_group.removeClass("error");
out[prop] = num;
}
}
return out;
};
$scope.recalculate = function() {
var cost_basis, initial_camera_value, proceeds, props, trade_return;
props = $scope.normalize();
if (!props) {
return;
}
//bandwidth
storagekbs = props.fps * props.bitrate;
storagekbs = props.fps * props.bitrate;
ultstorage = props.camera_count * storagekbs;
bandwidth = ultstorage/1000;
$scope.bandwidth = bandwidth;
//live storage
storagekbithr = storagekbs*3600;
grossstorkbday = (storagekbithr * props.recorded_hours)/8;
grossstorgbday = grossstorkbday/1000000000;
motiongbcam = grossstorgbday * props.motion_percentage;
netgbday = motiongbcam * props.camera_count;
$scope.livestorage = netgbday * (props.recorded_hours / 24);
};
return $scope.recalculate();
};
}).call(this);
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="/calc/calculator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4 offset1">
<div id="calculator" ng-controller="Calculator">
<form class="form-horizontal">
<!-- Buffer for Growth -->
<div class="control-group">
<label class="control-label">Buffer for Growth (%)</label>
<div class="controls">
<input type="text" name="growthbuffer" ng-model="buffer_for_growth" ng-change="recalculate()"/>
</div>
</div>
<!-- Number of Cameras -->
<div class="control-group">
<label class="control-label">Number of Cameras</label>
<div class="controls">
<input type="text" name="cameras" ng-model="camera_count" ng-change="recalculate()"/>
</div>
</div>
<!-- FPS -->
<div class="control-group">
<label class="control-label">FPS</label>
<div class="controls">
<input type="text" name="fps" ng:format="number" ng-model="fps" ng-change="recalculate()"/>
</div>
</div>
<!-- Bitrate -->
<div class="control-group">
<label class="control-label">Bitrate</label>
<div class="controls">
<input type="text" name="bitrate" ng:format="number" ng-model="bitrate" ng-change="recalculate()"/>
</div>
</div>
<!-- Recorded Hours -->
<div class="control-group">
<label class="control-label">Recorded Hours</label>
<div class="controls">
<input type="text" name="recordedhours" ng:format="number" ng-model="recorded_hours" ng-change="recalculate()"/>
</div>
</div>
<!-- Motion Percentage -->
<div class="control-group">
<label class="control-label">Motion Percentage</label>
<div class="controls">
<input type="text" name="motion_percentage" ng:format="number" ng-model="motion_percentage" ng-change="recalculate()"/>
</div>
</div>
<!-- Days Retained -->
<div class="control-group">
<label class="control-label">Retention (days)</label>
<div class="controls">
<input type="text" name="daysretained" ng-model="days_retained" ng-change="recalculate()"/>
</div>
</div>
<!-- Compression -->
<div class="control-group">
<label class="control-label">Compression</label>
<div class="controls">
<select ng-model="color" ng-options="c.name for c in colors"></select>
</div>
</div>
<div id="display">
<span class="percent">
Bandwidth:
<br>
{{bandwidth|number:0}} Mbps
</span>
<span class="percent">
<br><br><br><br>
Live Storage:
<br>
{{livestorage|number:2}} GB
</span>
<span class="percent">
<br><br><br><br>
Storage:
<br>
{{earnings_percent|number:2}}%
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
function Calculator($scope) {
$scope.earnings_dollar = 0.00;
$scope.earnings_percent = 0.00;
$scope.bandwidth = 0;
$scope.camera_count = "42";
$scope.bitrate = "2000";
$scope.fps = "10";
$scope.recorded_hours = "24";
$scope.motion_percentage = "30";
$scope.days_retained = "30";
$scope.number_days_recorded = "4.95";
$scope.colors = [
{name:'mjpeg', shade:'dark'},
{name:'mpeg4', shade:'light'},
{name:'h264', shade:'dark'}
];
$scope.normalize = function() {
var control_group, num, out, prop, val, _i, _len, _ref;
out = {};
_ref = ['camera_count', 'fps', 'number_days_recorded', 'bitrate', 'recorded_hours', 'motion_percentage'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
prop = _ref[_i];
val = $scope[prop].replace("$", "");
num = parseFloat(val);
control_group = $("input[name='" + prop + "']").parent();
if (isNaN(num)) {
control_group.addClass("error");
return null;
}
else {
control_group.removeClass("error");
out[prop] = num;
}
}
return out;
};
$scope.recalculate = function() {
var cost_basis, initial_camera_value, proceeds, props, trade_return;
props = $scope.normalize();
if (!props) {
return;
}
//bandwidth
var storagekbs = props.fps * props.bitrate;
storagekbs = props.fps * props.bitrate;
var ultstorage = props.camera_count * storagekbs;
var bandwidth = ultstorage/1000;
$scope.bandwidth = bandwidth;
//live storage
var storagekbithr = storagekbs*3600;
var grossstorkbday = (storagekbithr * props.recorded_hours)/8;
var grossstorgbday = grossstorkbday/1000000000;
var motiongbcam = grossstorgbday * props.motion_percentage;
var netgbday = motiongbcam * props.camera_count;
$scope.livestorage = netgbday * (props.recorded_hours / 24);
};
};
//由CoffeeScript 1.6.1生成
(功能(){
window.Calculator=函数($scope){
$scope.earnings\美元=0.00;
$scope.earnings_%=0.00;
$scope.camera_count=“42”;
$scope.bitrate=“2000”;
$scope.fps=“10”;
$scope.recorded_hours=“24”;
$scope.motion_percentage=“30”;
$scope.days_reserved=“30”;
$scope.number_days_recorded=“4.95”;
$scope.colors=[
{name:'mjpeg',shade:'dark'},
{名称:'mpeg4',阴影:'light'},
{name:'h264',shade:'dark'}
];
$scope.normalize=函数(){
变量控制组,数值,输出,属性,值,变量,变量i,变量len,变量ref;
out={};
_ref=[‘摄像机计数’、‘fps’、‘记录天数’、‘比特率’、‘记录小时数’、‘运动百分比’];
对于(_i=0,_len=_ref.length;_i<_len;_i++){
prop=_ref[_i];
val=$scope[prop]。替换(“$”,”);
num=parseFloat(val);
控件组=$(“输入[name=”+prop+“]])。父对象();
if(isNaN(num)){
control_group.addClass(“错误”);
返回null;
}否则{
控制组removeClass(“错误”);
out[prop]=num;
}
}
返回;
};
$scope.recreaculate=函数(){
var成本基础、初始价值、收益、道具、交易回报;
props=$scope.normalize();
如果(!道具){
返回;
}
//带宽
storagekbs=props.fps*props.bitrate;
storagekbs=props.fps*props.bitrate;
ultstorage=props.camera\u count*storagekbs;
带宽=存储容量/1000;
$scope.bandwidth=带宽;
//实时存储
storagekbithr=storagekbs*3600;
总存储时间=(存储时间*记录的道具小时数)/8;
GrossTorgDay=GrossTorkDay/100000000;
motiongbcam=GrossTorgbday*props.motion\u百分比;
netgbday=motiongbcam*props.camera\u计数;
$scope.livestorage=netgbday*(props.recorded_小时/24);
};
返回$scope.recreaculate();
};
}).打电话(这个);
我对您的代码做了一些更改,现在可以使用了。(由于某种原因,它仍然无法在JSFIDLE中工作,但无论如何我都不太喜欢它)有很多问题。这是一个组合,你的HTML有问题,以及你的角度控制器和其他东西被不当格式化
首先,你的Javascript有很多问题。我将几个变量声明为var
,因为没有任何声明。还有一些变量没有在作用域中声明,因此无法绑定到html。除此之外,HTML中还存在一些主要问题,例如随机结尾的
标记和多个没有结尾标记的div。因此,我已更新了您的所有代码,并且“立即选择”有效。请参见下面的更新代码:
HTML:
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/calc/angular.js"></script>
<script type="text/javascript" src="/calc/calculator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4 offset1">
<div id="calculator" ng-controller="Calculator">
<form class="form-horizontal">
<!-- Buffer for Growth -->
<div class="control-group">
<label class="control-label">Buffer for Growth (%)</label>
<div class="controls">
<input type="text" name="growthbuffer" ng-model="buffer_for_growth" ng-change="recalculate()">
</div>
</div>
<!-- Number of Cameras -->
<div class="control-group">
<label class="control-label">Number of Cameras</label>
<div class="controls">
<input type="text" name="cameras" ng-model="camera_count" ng-change="recalculate()">
</div>
</div>
<!-- FPS -->
<div class="control-group">
<label class="control-label">FPS</label>
<div class="controls">
<input type="text" name="fps" ng:format="number" ng-model="fps" ng-change="recalculate()">
</div>
</div>
<!-- Bitrate -->
<div class="control-group">
<label class="control-label">Bitrate</label>
<div class="controls">
<input type="text" name="bitrate" ng:format="number" ng-model="bitrate" ng-change="recalculate()">
</div>
</div>
<!-- Recorded Hours -->
<div class="control-group">
<label class="control-label">Recorded Hours</label>
<div class="controls">
<input type="text" name="recordedhours" ng:format="number" ng-model="recorded_hours" ng-change="recalculate()">
</div>
</div>
<!-- Motion Percentage -->
<div class="control-group">
<label class="control-label">Motion Percentage</label>
<div class="controls">
<input type="text" name="motion_percentage" ng:format="number" ng-model="motion_percentage" ng-change="recalculate()">
</div>
</div>
<!-- Days Retained -->
<div class="control-group">
<label class="control-label">Retention (days)</label>
<div class="controls">
<input type="text" name="daysretained" ng-model="days_retained" ng-change="recalculate()">
</div>
</div>
<!-- Compression -->
<div class="control-group">
<label class="control-label">Compression</label>
<div class="controls">
<select ng-model="color" ng-options="c.name for c in colors"></select><br>
</select>
<!--<select name="compression" ng-model="video_compression" ng-change="recalculate()">
<option value="MJPEG">MJPEG</option>
<option value="MPEG4">MPEG4</option>
<option value="H.264">H.264</option>
</select>-->
</div>
</div>
</form>
<div id="display">
Bandwidth:<br>
{{ bandwidth|number:0 }} Mbps <span class="percent">
<br><br><br><br>
Live Storage:<br>
{{ livestorage|number:2 }} GB <span class="percent">
<br><br><br><br>
Storage:<br>{{ earnings_percent|number:2 }}%</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
// Generated by CoffeeScript 1.6.1
(function() {
window.Calculator = function($scope) {
$scope.earnings_dollar = 0.00;
$scope.earnings_percent = 0.00;
$scope.camera_count = "42";
$scope.bitrate = "2000";
$scope.fps = "10";
$scope.recorded_hours = "24";
$scope.motion_percentage = "30";
$scope.days_retained = "30";
$scope.number_days_recorded = "4.95";
$scope.colors = [
{name:'mjpeg', shade:'dark'},
{name:'mpeg4', shade:'light'},
{name:'h264', shade:'dark'}
];
$scope.normalize = function() {
var control_group, num, out, prop, val, _i, _len, _ref;
out = {};
_ref = ['camera_count', 'fps', 'number_days_recorded', 'bitrate', 'recorded_hours', 'motion_percentage'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
prop = _ref[_i];
val = $scope[prop].replace("$", "");
num = parseFloat(val);
control_group = $("input[name='" + prop + "']").parent();
if (isNaN(num)) {
control_group.addClass("error");
return null;
} else {
control_group.removeClass("error");
out[prop] = num;
}
}
return out;
};
$scope.recalculate = function() {
var cost_basis, initial_camera_value, proceeds, props, trade_return;
props = $scope.normalize();
if (!props) {
return;
}
//bandwidth
storagekbs = props.fps * props.bitrate;
storagekbs = props.fps * props.bitrate;
ultstorage = props.camera_count * storagekbs;
bandwidth = ultstorage/1000;
$scope.bandwidth = bandwidth;
//live storage
storagekbithr = storagekbs*3600;
grossstorkbday = (storagekbithr * props.recorded_hours)/8;
grossstorgbday = grossstorkbday/1000000000;
motiongbcam = grossstorgbday * props.motion_percentage;
netgbday = motiongbcam * props.camera_count;
$scope.livestorage = netgbday * (props.recorded_hours / 24);
};
return $scope.recalculate();
};
}).call(this);
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="/calc/calculator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4 offset1">
<div id="calculator" ng-controller="Calculator">
<form class="form-horizontal">
<!-- Buffer for Growth -->
<div class="control-group">
<label class="control-label">Buffer for Growth (%)</label>
<div class="controls">
<input type="text" name="growthbuffer" ng-model="buffer_for_growth" ng-change="recalculate()"/>
</div>
</div>
<!-- Number of Cameras -->
<div class="control-group">
<label class="control-label">Number of Cameras</label>
<div class="controls">
<input type="text" name="cameras" ng-model="camera_count" ng-change="recalculate()"/>
</div>
</div>
<!-- FPS -->
<div class="control-group">
<label class="control-label">FPS</label>
<div class="controls">
<input type="text" name="fps" ng:format="number" ng-model="fps" ng-change="recalculate()"/>
</div>
</div>
<!-- Bitrate -->
<div class="control-group">
<label class="control-label">Bitrate</label>
<div class="controls">
<input type="text" name="bitrate" ng:format="number" ng-model="bitrate" ng-change="recalculate()"/>
</div>
</div>
<!-- Recorded Hours -->
<div class="control-group">
<label class="control-label">Recorded Hours</label>
<div class="controls">
<input type="text" name="recordedhours" ng:format="number" ng-model="recorded_hours" ng-change="recalculate()"/>
</div>
</div>
<!-- Motion Percentage -->
<div class="control-group">
<label class="control-label">Motion Percentage</label>
<div class="controls">
<input type="text" name="motion_percentage" ng:format="number" ng-model="motion_percentage" ng-change="recalculate()"/>
</div>
</div>
<!-- Days Retained -->
<div class="control-group">
<label class="control-label">Retention (days)</label>
<div class="controls">
<input type="text" name="daysretained" ng-model="days_retained" ng-change="recalculate()"/>
</div>
</div>
<!-- Compression -->
<div class="control-group">
<label class="control-label">Compression</label>
<div class="controls">
<select ng-model="color" ng-options="c.name for c in colors"></select>
</div>
</div>
<div id="display">
<span class="percent">
Bandwidth:
<br>
{{bandwidth|number:0}} Mbps
</span>
<span class="percent">
<br><br><br><br>
Live Storage:
<br>
{{livestorage|number:2}} GB
</span>
<span class="percent">
<br><br><br><br>
Storage:
<br>
{{earnings_percent|number:2}}%
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
function Calculator($scope) {
$scope.earnings_dollar = 0.00;
$scope.earnings_percent = 0.00;
$scope.bandwidth = 0;
$scope.camera_count = "42";
$scope.bitrate = "2000";
$scope.fps = "10";
$scope.recorded_hours = "24";
$scope.motion_percentage = "30";
$scope.days_retained = "30";
$scope.number_days_recorded = "4.95";
$scope.colors = [
{name:'mjpeg', shade:'dark'},
{name:'mpeg4', shade:'light'},
{name:'h264', shade:'dark'}
];
$scope.normalize = function() {
var control_group, num, out, prop, val, _i, _len, _ref;
out = {};
_ref = ['camera_count', 'fps', 'number_days_recorded', 'bitrate', 'recorded_hours', 'motion_percentage'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
prop = _ref[_i];
val = $scope[prop].replace("$", "");
num = parseFloat(val);
control_group = $("input[name='" + prop + "']").parent();
if (isNaN(num)) {
control_group.addClass("error");
return null;
}
else {
control_group.removeClass("error");
out[prop] = num;
}
}
return out;
};
$scope.recalculate = function() {
var cost_basis, initial_camera_value, proceeds, props, trade_return;
props = $scope.normalize();
if (!props) {
return;
}
//bandwidth
var storagekbs = props.fps * props.bitrate;
storagekbs = props.fps * props.bitrate;
var ultstorage = props.camera_count * storagekbs;
var bandwidth = ultstorage/1000;
$scope.bandwidth = bandwidth;
//live storage
var storagekbithr = storagekbs*3600;
var grossstorkbday = (storagekbithr * props.recorded_hours)/8;
var grossstorgbday = grossstorkbday/1000000000;
var motiongbcam = grossstorgbday * props.motion_percentage;
var netgbday = motiongbcam * props.camera_count;
$scope.livestorage = netgbday * (props.recorded_hours / 24);
};
};
计算器
增长缓冲(%)
摄像机数量
FPS
比特率
记录小时数