Javascript 如何在html中动态附加变量

我有一个使用php的foreach循环，在这个循环中我传递了三个参数

这是我的html

<tbody><?php
   foreach($rows as $row):?>
       <tr class="odd gradeA">
            <td><a href="#"><?=$row->firstName?> <?=$row->lastName?></a></td>
            <td><?=$row->address . ' ' . $row->city . ' ' . $row->state . ' ' . $row->zipCode?></td>
            <td><?=$row->email?></td>
            <td><?=$row->cellPhone?></td>
            <td class="text-right tableIcons">
                <a title="Edit User" href="users/edit/<?=$row->userId?>" class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></a>
                <button ng-click="remove(<?=$row->firstName?>, <?=$row->lastName?>, <?=$row->userId?>)" title="Remove User" href="#" class="userRemove btn btn-danger btn-xs"><i class="fa fa-trash"></i></button>
            </td>
       </tr><?php
   endforeach?>
</tbody>

                <!-- begin remove modal -->
            <script type="text/ng-template" id="remove.html">
                <div class="modal-header">
                    <h3 class="modal-title">Are You Sure!</h3>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger m-b-0">
                        <h4><i class="fa fa-info-circle"></i> This can be undone</h4>
                        <p>{{firstName}} would be remove.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" ng-click="confirmRemove()">Remove</button>
                    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
                </div>
            </script>
            <!-- end remove modal -->

---

问题在于firstName没有附加到remove.html模式。它不会在html中显示名字。

您需要在删除模型的脚本标记中指定控制器名称： 比如：

你确定！
这是可以撤销的
{{firstName}}将被删除

去除
取消

希望它能解决。

模态HTML:：

 <!-- begin remove modal -->
    <script type="text/ng-template" id="remove.html" ng-controller="ModalController">
        <div class="modal-header">
            <h3 class="modal-title">Are You Sure!</h3>
        </div>
        <div class="modal-body">
            <div class="alert alert-danger m-b-0">
                <h4><i class="fa fa-info-circle"></i> This can be undone</h4>
                <p>{{userData.firstName}} {{userData.lastName}} would be remove.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="confirmRemove()">Remove</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <!-- end remove modal -->

ModalController：

  angular.module('YOUR_MODULE_NAME').controller('ModalController', ['$scope',
    '$modalInstance',
    'userData',
     function ($scope, $modalInstance, userData) {

      $scope.userData = userData;

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
  }])

---

我希望这是一个完整的解决方案。

who html封装在一个控制器中。多亏了我，我想我解决了它。我不知道这是不是你想告诉我的，但这很有帮助。我必须在controller:函数中移动$scope.firstName。谢谢

 <!-- begin remove modal -->
    <script type="text/ng-template" id="remove.html" ng-controller="ModalController">
        <div class="modal-header">
            <h3 class="modal-title">Are You Sure!</h3>
        </div>
        <div class="modal-body">
            <div class="alert alert-danger m-b-0">
                <h4><i class="fa fa-info-circle"></i> This can be undone</h4>
                <p>{{userData.firstName}} {{userData.lastName}} would be remove.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="confirmRemove()">Remove</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <!-- end remove modal -->

  $scope.remove = function (firstName, lastName, userId) {
    $scope.firstName = firstName;
    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'remove.html',
      controller: 'ModalController',
      resolve: {
        userData: {
          "firstName": firstName,
          "lastName": lastName,
          "userId": userId
        }
      }
    })
  };

  angular.module('YOUR_MODULE_NAME').controller('ModalController', ['$scope',
    '$modalInstance',
    'userData',
     function ($scope, $modalInstance, userData) {

      $scope.userData = userData;

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
  }])