Angular Почему часы не работают и стоит ли мне их использовать?

Я пытаюсь получить значение некоторых входных данных, которые зависят от данных из других входных данных. Я считаю, что для этого мне нужны часы, но я не уверен, потому что все, что я пробовал, терпит неудачу с ошибками, с которыми я понятия не имею, как с ними бороться.

У меня есть форма оптового заказа с пятью полями в нескольких строках, например.

code | quantity | price | discount % | total 1 |
code | quantity | price | discount % | total 2 |
code | quantity | price | discount % | total 3 |
code | quantity | price | discount % | total 4 |

Столбец «Код» — это автоматически заполняемый список кодов продуктов, которые при нажатии заполняют столбец «Цена». Затем, когда количество и скидка настраиваются, общий столбец обновляется.

Итого отображается исключительно для пользователя, но мгновенно обновляется при изменении любого из 3 предыдущих входов. Я пытаюсь получить промежуточную сумму всех итогов, отображаемых для пользователя. Вот некоторые из моих попыток посмотреть итоги.

Вот плункер http://embed.plnkr.co/XdGjHy

Вот мои входы. Это взято из цикла php for, который выводит 100 строк.

<tr>
    <td class="td-code"><input id="code'.$i.'" name="code'.$i.'" type="text" class="code'.$i.' order-code" value="'.@$orderItem->{'code'.$i}.'" /></td>
    <td class="td-price"><input ng-model="price'.$i.'" class="order-price" id="price'.$i.'" name="price'.$i.'" type="number" value="'.@$orderItem->{'price'.$i}.'" step="0.50"/></td>
    <td class="td-quantity"><input ng-model="quantity'.$i.'" class="order-price" id="quantity'.$i.'" name="quantity'.$i.'" type="number" value="'.@$orderItem->{'quantity'.$i}.'" /></td>
    <td class="td-discount"><input ng-model="discount'.$i.'" class="order-price" id="discount'.$i.'" name="discount'.$i.'" type="number" value="'.@$orderItem->{'discount'.$i}.'" /></td>
    <td class="td-total"><span class="row-total" ng-model="total'.$i.'" id="total'.$i.'" class="order-price" id="total'.$i.'" valid-number/>{{(price'.$i.' * quantity'.$i.') / 100 * (100 - discount'.$i.') | number:2}}</span></td>
</tr>

Пример одного из часов, которые ничего не возвращают для меня. Я просто пытаюсь хотя бы сложить первые две суммы вместе и отобразить их.

$scope.$watch("total1", function (newValue, oldValue) {

    $scope.updated_info = $scope.total1 + $scope.total2;            

});

Затем, когда я помещаю {{updated_info}} или {{scope.updated_info}}, я ничего не вижу.

Пример второго кода, который я поместил в приложение контроллера.

$scope.total = function() {
    var total = parseFloat($scope.total1 || 0) + parseFloat($scope.total2 || 0) +
                parseFloat($scope.total3 || 0) + parseFloat($scope.total4 || 0) + 
                parseFloat($scope.total5 || 0);
    return total || 0;
};

Затем, когда я снова помещаю {{total}} или {{scope.total}}, я ничего не вижу.


angularjs watch
person warmwhisky    schedule 02.03.2017    source источник
comment
$scope.total — это функция, поэтому напишите {{total()}}.   -  person Manikandan Velayutham    schedule 02.03.2017
comment
Это просто дает мне ноль.   -  person warmwhisky    schedule 02.03.2017
comment
Ваша функция возвращает ноль, поэтому отлаживайте и проверяйте значения вычислений.   -  person Manikandan Velayutham    schedule 02.03.2017
comment
К сожалению, это то, чем я занимаюсь со вчерашнего дня.   -  person warmwhisky    schedule 02.03.2017
comment
Вы можете добавить плунжер?. Каждый может легко ответить.   -  person Manikandan Velayutham    schedule 02.03.2017
comment
Спасибо за предложение. Вот уменьшенная версия embed.plnkr.co/XdGjHy.   -  person warmwhisky    schedule 02.03.2017

Ответы (1)


arrow_upward
1
arrow_downward

В вашем коде много ошибок, и {{total()}} находится за пределами div ng-controller. Смотрите мой простой ответ ниже.

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <style>
    td {
      width: 100px;
    }
    input {
      width: 100px;
    }
  </style>
</head>

<body>
  
  <style type="text/css">
    /* style the auto-complete response */
    
    li.ui-menu-item {
      font-size: 12px !important;
    }
  </style>
  <div ng-app="myApp" ng-controller="OrderController" class="row">
    <div class="page-header">
      <h1>Order Form</h1>
      <form onsubmit="return false;">
        <table>
          <thead>
            <tr>
              <th>Image</th>
              <th>Code</th>
              <th>Desc</th>
              <th>Price</th>
              <th>Qty</th>
              <th>Total</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="order-image">
                  <span id="image1"></span>
                </div>
              </td>
              <td>
                <input id="code1" type="text" class="code1 order-code" />
              </td>
              <td>
                <input class="order-prod_desc" id="prod_desc1" type="text" />
              </td>
              <td>
                <input ng-model="price1" placeholder="price" ng-change="change();" class="order-price" id="price1" name="price1" type="number" />
              </td>
              <td>
                <input ng-model="quantity1" placeholder="quantity" ng-change="change();" class="order-price" id="quantity1" type="number" value="" />
              </td>
              <td>
                <input class="order-price" placeholder="total" ng-model="total1" ng-disabled="true" id="total1" type="number" step="0.01" />
              </td>
            </tr>
            <tr>
              <td>
                <div class="order-image">
                  <span id="image2"></span>
                </div>
              </td>
              <td>
                <input id="code2" type="text" class="code2 order-code" />
              </td>
              <td>
                <input class="order-prod_desc" id="prod_desc2" type="text" />
              </td>
              <td>
                <input ng-model="price2" placeholder="price" ng-change="change();" class="order-price" id="price2" name="price2" type="number" />
              </td>
              <td>
                <input ng-model="quantity2" placeholder="quantity" ng-change="change();" class="order-price" id="quantity2" type="number" value="" />
              </td>
              <td>
                <input class="order-price" placeholder="total" ng-model="total2" ng-disabled="true" id="total2" type="number" value="" step="0.01" />
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
      <h2>Total: {{total()}}</h2>
  </div>

  <script>
    var myApp = angular.module('myApp', []);



    myApp.controller('OrderController', function($scope) {

$scope.change = function(){
  $scope.total1 = ($scope.price1 || 0)  * ($scope.quantity1 || 0);
$scope.total2 = ($scope.price2 || 0 ) * ($scope.quantity2 || 0);
}

      $scope.total = function() {
        var total = parseFloat($scope.total1 || 0) + parseFloat($scope.total2 || 0);
        return total || 0;
        
      };
    });
  </script>
  </body>

</html>

person Manikandan Velayutham    schedule 02.03.2017
comment
Эй, Маникандан. Это сработало отлично, мои знания Angular очень низкие, а JS тоже плохой. Я очень ценю вашу помощь здесь - person warmwhisky; 02.03.2017
comment
Добро пожаловать друг. - person Manikandan Velayutham; 02.03.2017