如何更新ng-repeat中的过滤功能

时间:2014-12-16 07:24:36

标签: javascript angularjs filter ng-repeat

有很多问题, 当我点击其中一个标签

    <div class="segmented-control">
    <a href="#"  ng-click="click(1)" ng-class="class" class="control-item ">near</a>
    <a href="#"  ng-click="click(2)" ng-class="class" class="control-item ">often</a>
    <a href="#"  ng-click="click(0)" ng-class="class" class="control-item ">all</a>
  </div>

然后

<li class="table-view-cell media" ng-repeat="shop in shops | filter: func | orderBy:'bySort'">

可以通过“filter:func”更新。我的棱镜在这里

$scope.shops =[{..,near:ture,often:flase},{..,near:false,often:true}]; $scope.click = function(e) {..}

然后不能把它

1 个答案:

答案 0 :(得分:1)

请看这个片段:

angular.module('myApp', [])
.controller('MyController', function($scope){
  
  $scope.locations = [
  {
    name: 'Near',
    near: true,
    often: null
  },
   {
    name: 'Often',
    near: null,
    often: true
  },
   {
    name: 'All',
    near: null,
    often: null
  }];
  
  $scope.currentLocation = null;
  
  $scope.shops = [
    {
      name: "First",
      near: true,
      often: false
    },
    {
      name: "Second",
      near: true,
      often: true
    },
    {
      name: "Third",
      near: false,
      often: true
    },
    {
      name: "Fourth",
      near: false,
      often: false
    }
  ];
  
  $scope.setCurrentLocation = function(location){
     $scope.currentLocation = location;
  };
  
  $scope.shopFilter = function(shop){
    var location = $scope.currentLocation;
    if(location == null)
      return true;
    
    return (location.near === null && location.often == null)
    || location.near === shop.near || location.often === shop.often;
  };
  
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyController" >
    <div>
    <div class="btn-group">
      <button class="btn btn-default" ng-repeat="loc in locations"
              ng-click="setCurrentLocation(loc)">{{loc.name}}</button>
    </div>
    </div>
    
    <ul class="list-group col-sm-4">
      <li class="list-group-item" ng-repeat="shop in shops | filter:shopFilter">{{shop.name}}</li>
    </ul>
  </div>
</div>