Question

我正在尝试使用Angularjs在单击表格中的行中获取数据并在可编辑的对话框中显示它。我怎样才能做到这一点？这是我到目前为止所做的：

<table>
                <thead>
                    <tr>
                        <th>ID No.</th>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Gender</th>
                        <th>Time</th>
                        <th>Date</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="walkin_member in data | filter:searchFilter">
                        <td><a class="click">{{walkin_member.id}}</a></td>
                        <td>{{walkin_member.firstname}}</td>
                        <td>{{walkin_member.lastname}}</td>
                        <td>{{walkin_member.gender}}</td>
                        <td>{{walkin_member.time}}</td>
                        <td>{{walkin_member.datestamp}}</td>
                        <td>{{walkin_member.type}}</td>
                    </tr>
                </tbody>
            </table>

这是我的对话框标记：

<div id="dlgbox">
    <div id="dlg-header">Information</div>
    <div id="dlg-body">
      Firstname <input type="text" value="{{walkin_member.firstname}}"><br/>
      Lastname <input type="text" value="{{walkin_member.lastname}}"><br/>
      Gender <input type="text" value="{{walkin_member.gender}}"><br/>
      Type <input type="text" value="{{walkin_member.type}}"><br/>

    </div>
    <div id="dlg-footer">
        <button onclick="dlgUpdate()">Update</button>
        <button onclick="dlgExit()">Exit</button>
    </div>
</div>

这是我的控制器：

myApp.controller('loglistController', ['$scope', '$http', function ($scope, $http) {
            $http.get("../php/loglistajax.php")
                .success(function(data){
                    $scope.data = data;
                })
                .error(function() {
                    $scope.data = "error in fetching data";
                });
        }]);

隐藏对话框，只显示该功能是否被触发这是我的javascript。

function showDialog(){
        var whitebg = document.getElementById("white-background");
        var dlg = document.getElementById("dlgbox");
        whitebg.style.display = "block";
        dlg.style.display = "block";

        var winWidth = window.innerWidth;

        dlg.style.left = (winWidth/2) - 480/2 + "px";
        dlg.style.top = "150px";


    }

Answer 1

将ng-click事件添加到每行的锚标记中，并将当前成员传递给该方法。

<tr ng-repeat="walkin_member in data | filter:searchFilter">
    <td>
        <a class="click" href="#"
                           ng-click="showInEdit(walkin_member)">{{walkin_member.id}}</a>
      </td>
</tr>

现在在你的控制器中，添加一个新属性来保存所选成员和一个名为showInEdit()的方法

myApp.controller('loglistController', ['$scope', '$http', function ($scope, $http) {

     $scope.data=[];
     $scope.selectedMember={ firstname:"",lastname:"",gender:"",type:"" }; //new property

     $http.get("../php/loglistajax.php")
          .success(function(data){
                 $scope.data = data;
              })
          .error(function() {
                 $scope.data = "error in fetching data";
             });
     $scope.showInEdit=function(member){
           $scope.selectedMember = member;
     };

}]);

在模型对话框中，您将使用selectedMember属性。

<div id="dlgbox">
    <div id="dlg-header">Information</div>
    <div id="dlg-body">
      Firstname <input type="text" ng-model="selectedMember.firstname" />
    </div>
</div>

单击时从行中获取数据并显示到可编辑对话框

1 个答案: