角度复选框列表操作答案

【问题标题】：angular checkbox list manipulation角度复选框列表操作
【发布时间】：2016-06-22 00:04:04
【问题描述】：

我的列表中有多个列，我想在我的索引中添加复选框。我希望能够选中这些框以获取过滤列表，当取消选中它们时，它当然应该给我正确的结果。我不确定实现这一目标的最佳方法。一些帖子在谈论观察者，而另一些则建议只是要推送的数据数组。我尝试推送到一个数组，然后将其设置为 $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

谢谢

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angular-ui-router

【解决方案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

【讨论】：

不错。唯一的问题是它不允许我同时选择两者并且像单选按钮一样工作......不是复选框。