角複選框列表操作

我有我的列表中多列，我想複選框添加到我的索引。我希望能夠檢查這些框以獲得過濾列表，以及何時取消選中它們，當然它應該給我正確的結果。我不確定實現這一目標的最佳方式。有些文章是關於觀察者的，而其他人則建議只是推送數據。我嘗試推送到一個數組，然後將其設置爲$ scope.cars，但問題是回收我的原始$ scope.car只是太多的工作。所以我放棄了這個想法。現在我正在等待更好的解決方案。這裏是我的代碼角複選框列表操作

的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

感謝

來源

2016-06-22 Autolycus

您可以通過設置ng-model做到這一點在複選框上並使用該模式l在ng-repeat過濾

<input type="checkbox" ng-model="filters.mfgr" ng-true-value="BMW" ng-false-value=""> 

<li ng-repeat="car in cars | filter:{make:filters.mfgr}">

要合併的文本搜索和複選框使接受這兩款車型作爲參數

DEMO

來源

2016-06-22 00:17:25 charlietfl

不錯的自定義過濾器。只有問題，它不會讓我選擇兩個，並像單選按鈕...不復選框。 – Autolycus

@Deborah不清楚具體問題是什麼 – charlietfl

角複選框列表操作

回答

相關問題