4

AngularJS を介してデータにバインドされた HTML テーブルがあります。簡単にするために、CustomerId と CustomerName の 2 つの列があるとします。

ユーザーが行をクリックすると (またはプラス記号、ボタン、リンクは関係ありません)、行の下のセクションを展開し、ajax 呼び出しを行い、結果のデータを表示したいと思います。以前に展開された行があれば、それも折りたたみたいと思います。

これは DOM 操作タスクのように思えます。私は JQuery でそれを行う方法を知っています (または、少なくともそれを理解することができます)。

4

2 に答える 2

6

これは実際、現在の Angular で行うのは少し難しいですが、いくつかのオプションがあります。

<tr>まず、最も宣言的な解決策は、通常の状態で を<tr>使用し、編集状態で を使用することだと思います。

<tr ng-show="edit"><td><input ng-model="model.name" ...
<tr ng-hide="edit"><td>{{model.name}} ...

代替（実際にはより簡単です）は、列でこれを行うことです<td>

<tr>
  <td ng-show="edit"><input ng-model="model.name" ... 
  <td ng-hide="edit">{{model.name}} ... 
</tr>

これがより単純な理由は、Angular の現在のバージョン (1.0.x) では単一のルート要素に対してしか実行できないためですng-repeat(ただし、これは v 1.2.x: multi-element directivesで変更されるようです)。幸いなこと<tbody>に、html では複数のタグを使用することが許可されているため、これは実際には有効です。

<tbody ng-repeat="model in models"> 
  <tr ng-show="edit"><td><input ng-model="model.name" ...
  <tr ng-hide="edit"><td>{{model.name}} ...
<tbody>

ng-hideを使用すると、dom から要素が非表示になるだけであることに注意してください。ng-switchパフォーマンス (巨大なテーブルまたはモバイル デバイス) (または1.2.x) が心配な場合はng-if、dom から非表示の部分が削除されるため、より良いオプションになる可能性があります。

  <tbody ng-repeat="model in models" ng-switch="row.edit" ng-init="row={}">
    <tr ng-switch-when="true">
      <td><input type="text" ng-model="model.customerId" disabled /></td>
      <td><input type="text" ng-model="model.customerName" /></td>
      <td ng-click="row.edit=false">done</td>
    </tr>
    <tr ng-switch-default>
      <td>{{model.customerId}}</td>
      <td>{{model.customerName}}</td>
      <td ng-click="row.edit=true">edit</td>
    </tr>
  </tbody>

更新: ng-include を使用する 3 番目のソリューションを追加しました。

この方法はおそらく最も宣言的ではありませんが、かなりうまく機能します。2 つの異なる行テンプレートを作成し (これらは別のファイルにすることも、この例のように ng-template としてインライン化することもできます)、ng-include2 つのテンプレートを切り替えるために使用します。これは追加なしで機能することに注意してください<tbody>：

<script type="text/ng-template" charset="utf-8" id="display.html">
  <td>{{model.customerId}}</td>
  <td>{{model.customerName}}</td>
  <td ng-click="row.edit=true">edit</td>
</script>

<script type="text/ng-template" charset="utf-8" id="edit.html">
  <td><input type="text" ng-model="model.customerId" disabled /></td>
  <td><input type="text" ng-model="model.customerName" /></td>
  <td ng-click="row.edit=false">done</td>
</script>

<table border="0">
  <tr>
    <th>CustomerId</th>
    <th>CustomerName</th>
    <th>Edit</th>
  </tr>

  <tr ng-repeat="model in models" 
      ng-include="{true:'edit.html',false:'display.html'}[row.edit]" 
      ng-init="row={edit:false}"></tr>
</table>

ng-switch と ng-show/hide を使用して簡単な例を作成しました: http://plnkr.co/edit/6kBPIT0Z07ti4BtnGrXj

于 2013-06-03T08:05:33.170 に答える
0

これは、ディレクティブを使用して実行できます。DOM 操作は通常、ディレクティブを介して行われます。 http://plnkr.co/edit/0Z36Q3EEvP9GElzuAe5M

var app = angular.module('App', []);
        angular.module('App').directive(
                'tab', ['$http',
                    function ($http) {
                        return {
                            template: '<table border="1" ng-click="click();show=!show" ><tr >' +
                                    '<th >ID</th>' + '<th>customer</th>' +
                                    ' </tr>' +
                                    '<tr ng-show="show" ng-repeat="data in datas"><td>{{data[0]}}</td><td>'+
                                    '{{data[1]}}</td></tr>' +
                                    '</table><br/>',
                            restrict: 'A',
                            link: function postLink(scope,element) {
                                scope.show =false;
                                scope.click = function () {
                                    //console.log(scope.datas);
                                    if (scope.datas ==null) {
                                        $http.get('/data').success(function (data) {
                                            scope.datas =data;
                                        }).error(function () {
                                          scope.datas = [[1,"i am customer 1"],[3,"i am customer 2"]];
                                        })
                                    }
                                }
                            }
                        };
                    }
                ]);

HTML:

<body ng-app="App">
<div tab></div>
</body>
于 2013-06-03T07:37:07.093 に答える