1

问题如下。我有一个构建一些表的指令，我用它ng-repeat来动态地构建表行。每行有两个按钮，用于相应的编辑和删除。我寻找行动ng-click，但是如何将具有静态文本的单元格转换为具有角度方式的输入字段的单元格？我知道如何用 jquery 做到这一点。我环顾四周ng-switch，但我无法ng-repeat按预期在表格单元格内工作。我的代码：

JS

order.directive('orderLines',function($http,calculateTotalQtyService,$compile){

return {
    restrict: 'A',
    link: function($scope,element, attrs){

        $scope.editLine = function(line,order_id){
           // alert ('Edit'+line.id);
          some code here to perform transformation

        }
        $scope.deleteLine = function(idx){
            var line_to_delete = $scope.order.lines[idx]
            $http.post('/delete/line?id='+line_to_delete.id +'&order_id='+$scope.order.id).success(function(data){
                  $scope.order.lines.splice(idx,1);
                  $scope.order = data.ord;
                  $scope.order.customer = data.customer;
                  $scope.order.lines = data.lines;
                  var res = calculateTotalQtyService.set(data.lines);
                  $scope.total_kg = res[0];
                  $scope.total_piece = res[1];
            });

        }

    },
    templateUrl:'/assets/fragments/order/order_lines.html',
    replace: true
}
});

和 HTML

    <div class="span12 fiche" id="lines">
     <table class="table table-bordered" id="order_lines">
        <thead class="header_lines">
        <th>S.N.</th>
        <th>Ref.</th>
        <th>Label</th>
        <th>Tva</th>
        <th>Qty</th>
        <th>Unite</th>
        <th>Prix HT</th>
        <th>Total HT</th>
        <th></th>
        </thead>
        <tbody ng-switch="lines.length">
        <tr id="no_record" ng-switch-when="0"><th colspan="9"  style="text-align: center" >No records</th></tr>
        <tr ng-repeat="line in order.lines">
            <td>{{$index+1}}</td>
            <td class='line-ref'>{{line.product_ref}}</td>
            <td>{{line.label}}</td>
            <td class='line-tva'>{{line.tva}}</td>
            <td class='line-qty'>{{line.qty}}</td>
            <td class='line-unity'>{{line.unity}}</td>
            <td class='line-prix_ht'>{{line.prix_ht}}</td>
            <td>{{line.prix_ht*line.qty}}</td>
            <th class='control-buttons'>
                <button  class='btn editline' ng-click="editLine(line,order.id)"><i class='icon-edit'></i></button>
                <button class='btn deleteline' ng-click="deleteLine($index)"><i class='icon-trash'></i> </button>
            </th>
        </tr>
        </tbody>
    </table>
  </div>

所以 html 是一个模板，我在指令中使用。如何进行转型？用 ng 开关？但是如何，或者还有其他解决方案？如果可能的话，我想避免使用 jquery。任何帮助，将不胜感激。

4

1 回答 1

2

所以我得到了一个受@laut3rry 启发的自定义指令。对于那些有兴趣的人，这是我的解决方案：

指示：

order.directive('可编辑', function(){

return {
    restrict : 'E',
    replace : true,
    template: '<div><span ng-hide="editMode">{{line.qty}</span><input class="span1" ng-show="editMode" type="text" ng-model="line.qty"/></div>',

    link : function(scope, element, attrs){

    }
}

});

在 HTML 中，在我的示例中，它仅用于 qty 单元格，我需要更改，但我们可以将它用于任何单元格并进行一些修改，例如通过在指令的属性中传递单元格值和它可以通用：

<td class='line-qty'><editable></editable></td>

在我的控制器中，我初始化$scope.editMode = false默认情况下不可编辑的单元格，然后在 ng-click="editLine()" 处理程序中我们更改$scope.editMode = true并且单元格转换为输入字段。所以指令和指令以及再一次的指令.... :)

对于那些有兴趣的人，这里是 plunk plunk的链接

于 2013-06-15T18:30:31.837 回答