Question

我的列表中有多列，我想在索引中添加复选框。我希望能够检查框以获取筛选列表，当取消选中它们时，它当然应该给我正确的结果。我不确定实现这一目标的最佳方法。一些帖子正在谈论观察者，而其他人则建议只是推送数据。我尝试推送到一个数组，然后将其设置为$ 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="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" 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

感谢

Answer 1

您可以在复选框上设置ng-model并在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

角度复选框列表操作

1 个答案: