8

データをng-repeat編集しましたが、ユーザーが選択したものだけを取得しようとしています。私はそれを行う方法がわかりませんが、これは私が持っているものです：

HTML：

<div data-ng-controller="MyCtrl">
    <ul>
        <li data-ng-repeat="record in records">
            <input type="checkbox" ng-model="record.Id"> {{record.Id}}
        </li>
    </ul>
    <a href="javascript:;" data-ng-click="ShowSelected()">Show Selected</a>
</div>

JS：

function MyCtrl($scope) 
{
    $scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
    $scope.ShowSelected = function() 
    {
        // how can I get only the selected records here ?
    }
}

私はそれを一方向に機能させました-isSelected:false各オブジェクトにプロパティを追加しng-model、チェックボックスのをに変更することで、関数record.isSelectedでそれをフィルタリングできます。ShowSelectedこれは非効率的なようですが、回避できる場合は、モデルにプロパティを追加したくありません。

もっと良い方法はありますか？

4

2 に答える 2

12

JavaScript

var app = angular.module('plunker', ['ui']);

app.controller('MyCtrl', function($scope) {
    $scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
    $scope.selected = {};
    $scope.ShowSelected = function() {
      $scope.records = $.grep($scope.records, function( record ) {
        return $scope.selected[ record.Id ];
      });
    };      
});

HTML

<div data-ng-controller="MyCtrl">
    <ul>
        <li data-ng-repeat="record in records">
            <input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
        </li>
    </ul>
    <a href="javascript:;" data-ng-click="ShowSelected()">Show Selected</a>
</div>

http://plnkr.co/edit/lqtDQ6

フラグを個別に保存し、それを使用してデータをフィルタリングできます。

一部のCDNリンクが壊れたため、プランクを更新しました。

于 2012-09-25T09:48:12.203 に答える
1

最善の方法は、プロパティ'isSelected'をレコードに追加し、その値にバインドすることだと思います。このようなもの：

<input type="checkbox" ng-model="record.isSelected">

あなたができるもう一つのこと（特にあなたがその余分なプロパティをレコードに追加できない場合）は、選択されたアイテムの配列を維持し、ユーザーが選択を行ったときにそれらを選択された配列に追加/削除することです：

<input type="checkbox" ng-change="recordSelected(result)" ng-true-value="{{record.id}}" ng-false-value="{{-record.id}}" ng-model="result">

recordSelected関数は、コントローラーで処理され、選択されたレコードリストから追加/削除および記録します。

PS：レコードが選択されていないことを表すために負のレコードIDを使用しました。

于 2014-07-11T18:26:17.877 に答える