AngularJS选择/选项范围破坏计算器

时间:2013-06-12 19:58:04

标签: javascript angularjs angularjs-scope

我有一个AngularJS内置的计算器,除了Select / Options字段使结果不起作用外,所有字段都很好用。这是小提琴:http://jsfiddle.net/itamark/4kkCa/

当我试图把'颜色''在$ scope.normalize函数_ref中,它会破坏结果。当我把它拿出来时,结果很好。

这里也是代码 - 因为我认为它不适用于小提琴:

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>

JS:

// 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);

1 个答案:

答案 0 :(得分:1)

我对您的代码进行了一些更改,现在可以正常运行了。 (由于某种原因,仍然无法让它在jsFiddle中工作,但我从来都不喜欢它)有很多问题。它是你的HTML有问题的组合,以及你的Angular Controller和其他不正确格式化的东西。

首先,你的Javascript有很多问题。我将几个变量声明为var,因为没有任何声明。还有一些变量未在作用域上声明,因此它们无法绑定到html。最重要的是,HTML中存在一些主要问题,例如随机结尾</select>标记和多个没有结束标记的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="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>

<强> JS:

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);

};

};

应该这样做。再一次,不知道为什么它不适合小提琴。但是这两个更新的文件有效。