1

問題は次のとおりです。テーブルを構築するディレクティブがあり、ng-repeatテーブルの行を動的に構築するために使用します。各行には、適宜編集および削除するための 2 つのボタンがあります。でアクションを探しますが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

そこで、@laut3rrry に触発されたカスタム ディレクティブを使用して取得しました。興味がある人のために、これが私の解決策です：

指令：

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 に答える