dongzangchui2072 2016-11-15 14:18
浏览 44

AngularJS - 在表中逐行指令

I have a table generetad via PHP while and handled by 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))
            };


        });

Of course, when I write into a text input, all the the inputs with same ng-model get the same value.

Is there a way in Angular, maybe with IDs, that allows me compiling row by row, without change the others?

Sorry for bad english and thank you!

PS: I can't use ng-repeat.

  • 写回答

2条回答 默认 最新

  • duanchao4445 2016-11-18 07:36
    关注

    As @yBrodsky mentioned in the comment, use the controller on each <tr>, so you can have different scope for each <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>
    评论

报告相同问题？

悬赏问题

  • ¥15 winform的chart曲线生成时有凸起
  • ¥15 msix packaging tool打包问题
  • ¥15 finalshell节点的搭建代码和那个端口代码教程
  • ¥15 用hfss做微带贴片阵列天线的时候分析设置有问题
  • ¥15 Centos / PETSc / PETGEM
  • ¥15 centos7.9 IPv6端口telnet和端口监控问题
  • ¥20 完全没有学习过GAN，看了CSDN的一篇文章，里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 海浪数据 南海地区海况数据，波浪数据
  • ¥20 软件测试决策法疑问求解答