Question

我是angularjs的新手。

这是我的代码：

 $scope.styles = [{"name":"walking"},{"name":"Food"},{"name":"culture"}]

我创建了复选框列表

<div ng-repeat="style in styles">
 <input type="checkbox"> {{style}}
</div>

我正在获取具有样式值的Tours包，例如：walking ,food

$scope.tours = [{"Tourname":"sky walk","style:walking "},{"Tourname":"Accra markets","style":"food,walking"}]

我的目标：当我点击复选框中的某个样式时，所有仅显示样式的游览。

任何帮助或示例链接？

Answer 1

可能你可以这样做，你可以使用ng-show指令和一个函数来检查选择的样式，

function mainController($scope){
    $scope.styles = [{"name":"walking"},{"name":"Food"},{"name":"culture"}];
    $scope.tours = [{"Tourname":"sky walk",style:"walking "},{"Tourname":"Accra markets","style":"food,walking"}];

    $scope.selected=function(tour){
        for (var i = 0; i < $scope.styles.length; i++) {

            var style=$scope.styles[i];
            if(style.selected=="true" && tour.style.indexOf(style.name)>=0){
                return true;

            }
        }
        return false;
    }
}

HTML，

 <div ng-repeat="style in styles">
            <input ng-model="style.selected" ng-true-value="true" ng-false-value="false" type="checkbox"/>{{style}}
        </div>
        <h1>tours</h1>
        <div ng-repeat="tour in tours" ng-show="selected(tour)">
            <input type="checkbox"/>{{tour}}
        </div>

这是the Plunker

Answer 2

过滤器最适合过滤来自集合的数据。您可以将filter过滤器与您自己的范围谓词函数一起使用：

控制器中的谓词：

$scope.hasStyle = function(item){
    return $scope.styles.some(function(style){
      if(style.selected && item.style.indexOf(style.name) > -1) {
        return true;
      }
    })
  }

查看：

<div ng-repeat="style in styles"> <input type="checkbox" ng-model="style.selected">{{style.name}} </div> <div ng-repeat="tour in tours | filter: hasStyle">{{tour | json}}</div>

Demo

在角度js中优化文本搜索

2 个答案: