6

json オブジェクトのリストを返す AngularJS アプリがあり、それらのオブジェクトを反復処理してテーブルに配置します。

テーブルの各項目には、ng-click メソッドを使用した「削除」ボタンがあります。

<td><a ng-click="testButton()" class="btn btn-danger btn-mini">Delete</a></td>

私は ng-resource を使用してオブジェクトを削除しています - そしてそれはうまくいきます。

ただし、できればJQueryを使用して、削除後にオブジェクトと削除ボタンを格納する行を非表示 (または削除) できるようにしたいと考えています。

これが私の破棄方法です：

$scope.destroyThing = function() {
        $scope.thing= this.thing;
        $scope.thing.$destroy();
        $(this.thing).closest("tr").hide(); // something like this maybe
    }

メソッドはオブジェクトをうまく破棄します-行を削除しません...そのため、ボタンをクリックしたときに返されるオブジェクトをログに記録してみました:

$scope.testButton = function() {
        console.log(this);
    }

angular Scope オブジェクト自体を返すようですが、関連する DOM 要素にアクセスする方法が見つかりません。

これは testButton 関数から返されたオブジェクトを示すスクリーンショットです - もちろんボタンをクリックすることでトリガーされます:

ここに画像の説明を入力

JQuery を使用して Angular オブジェクトに関連する DOM 要素にアクセスするにはどうすればよいですか?

編集

完全な表の行は次のとおりです。

<tr ng-repeat="franchise in franchises">
                <td ng-model="franchiseName">{{franchise.franchise_name}}</td>
                <td ng-model="franchiseNumber">{{franchise.franchise_number}}</td>
                <td><a class="btn btn-mini">Edit</a></td>
                <td><a ng-click="destroyFranchise()" class="btn btn-danger btn-mini">Delete</a></td>

            </tr>
4

3 に答える 3

10

コントローラーから DOM にアクセスしたくありません。それは角度の禅に反しています:-D

使用ng-hideディレクティブ:

<td><a ng-click="hide()" ng-hide="isHidden">Delete</a></td>

そしてコントローラーは、ng-hideバインドされているモデル値 (この場合はisHiddenプロパティ) を変更するだけです。

テーブルにどのように入力しますか? を使用していng-repeatますか? その場合は、繰り返されるコレクションからアイテムを削除するだけで十分でng-repeatあり、DOM は自動的に更新されます。

http://www.youtube.com/watch?v=WuiHuZq_cg4をご覧 ください

于 2012-05-24T20:45:12.527 に答える
2

DOM を直接いじることは Angular の方法ではありませんが、DOM 要素を既存の jQuery プラグインなどに渡すために、まだこれを行う必要がある Google から来た人々のために:

  1. Angular-UIの jQuery パススルーを使用する(推奨)
  2. Angular ディレクティブを記述し、そこに DOM 処理をラップします。出発点: jsfiddle。
于 2012-09-07T18:34:36.887 に答える
0

tableRowClicked メソッドが行を引数として受け取るようにします。

<tbody id= "table_row">
 <tr ng-repeat="row in rows" ng-click="tableRowClicked(row)">
    <td ng-repeat="col in row">{{col}}</td>
</tr>
于 2012-09-06T07:56:28.093 に答える