0
私のリストに複数の列があり、インデックスにチェックボックスを追加したいと思います。私はフィルタリングされたリストを取得するためにボックスをチェックすることができるようにしたいと思うし、それらのチェックを外すとき、もちろんそれは私に正しい結果を与える必要があります。私はそれを達成するための最善の方法はわかりません。いくつかのポストはウォッチャーについて話しており、他の人はプッシュするデータの配列だけを提案していました。配列にプッシュして$ scope.carsに設定しようとしましたが、問題は、元の$ scope.carを取り戻すのはあまりにも多くの作業だということです。だから私はその考えを落とした。今私はより良い解決策を待っています。ここに私のコードは、あなたがng-modelを設定することによってこれを行うことができます角度チェックボックスのリスト操作
script.js
// Code goes here
var app = angular.module('myapp', []);
app.controller('DemoCtrl', [ '$scope', function($scope) {
$scope.q = '';
$scope.cars = [
{
year: 2006,
make: 'BMW',
model: 'M3'
},
{
year: 2006,
make: 'BMW',
model: 'Z4'
},
{
year: 1992,
make: 'Mazda',
model: 'Miata'
},
{
year: 2008,
make: 'BMW special',
model: '750'
}
];
}]);
index.htmlを
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="[email protected]*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="checkbox">BMW
<span style="margin-left:20px;"></span><input type="checkbox">Mazda</span>
<input class="form-control" type="text" ng-model="q" placeholder="Search by year, make, model" />
<br/>
<ul>
<li ng-repeat="car in cars | filter:filterCars">{{car.year}} {{car.make}} {{car.model}}</li>
</ul>
</div>
</body>
</html>
と彼女のEIS plunker http://plnkr.co/edit/QXPYKBkH6u7N374yjQHV?p=preview
おかげ
素敵として両方のモデルを受け入れるカスタムフィルタを作成します。私は両方を選択することはできませんし、ラジオボタンのように動作します...チェックボックスではありません。 – Autolycus
@デボラは特定の問題が何であるか明確ではありません – charlietfl