Question

我有一个表格generetad通过PHP，并由AngularJS处理：

<table>
   <tr>
     <th>Col 1</th>
     <th>Col 2</th>
     <th>Col 3</th>
   </tr>


   <?php
      while(...){
   ?>
       <tr>
          <td>
             <input type="text" ng-model="calcolo.ore">
          </td>
          <td>
             <input type="text" ng-model="calcolo.ricavo">
          </td>
          <td>
             <input type="text" ng-model="calcolo.abbatt">
          </td>
          <td>
             <input type='text'  ng-show="calcolo.abbatt" value='{{netti() | currency:"&euro;"}}'>
          </td>

       </tr>

   <?php } ?>

angular.module("myApp", ['ng-currency'])
    .controller("userController",
        function($scope) {

             $scope.fattlord = function() {
                return ($scope.calcolo.ore * $scope.calcolo.ricavo)
            };


            $scope.netti = function() {
                return ($scope.calcolo.ricavo-(($scope.calcolo.abbatt * $scope.calcolo.ricavo)/100))
            };


        });

当然，当我写入文本输入时，所有具有相同ng-model的输入都会获得相同的值。

在Angular中是否有一种方法，可能有ID，允许我逐行编译，而不更改其他？

抱歉英文不好，谢谢！

PS：我不能使用ng-repeat。

Answer 1

正如@yBrodsky在评论中提到的那样，在每个<tr>上使用控制器，因此每个<tr>可以有不同的范围。

<script data-require="angular.js.1.3@*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"</script>
<body data-ng-app="myApp">
<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <?php
      $i = 0;
      while($i++ < 5){
    ?>
    <tr data-ng-controller="userController">
        <td>
            <input type="text" ng-model="calcolo.ore">
        </td>
        <td>
            <input type="text" ng-model="calcolo.ricavo">
        </td>
        <td>
            <input type="text" ng-model="calcolo.abbatt">
        </td>
        <td>
            <input type='text'  ng-show="calcolo.abbatt" value='{{netti() | currency:"&euro;"}}'>
        </td>
    </tr>
    <?php } ?>
</table>
<script>
    angular.module("myApp", [])
    .controller("userController",
        function($scope) {
            $scope.calcolo = {}; //init

            $scope.fattlord = function() {
                return ($scope.calcolo.ore * $scope.calcolo.ricavo)
            };
            $scope.netti = function() {
                return ($scope.calcolo.ricavo-(($scope.calcolo.abbatt * $scope.calcolo.ricavo)/100))
            };
        }
       );
</script>
</body>

Answer 2

您可以为calcolo使用数组并增加PHP中每行的索引：ng-model="calcolo[0].abbatt"，ng-model="calcolo[1].abbatt"等。

然后在你的控制器中你可以遍历calcolo数组。

AngularJS - 在表中逐行指令

2 个答案: