Javascript 在angular js中优化文本搜索

我对angularjs是新手

这是我的密码：

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

我创建了复选框列表

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

我的目标：单击复选框中的某个样式时，仅显示该样式的所有巡演

---

任何帮助或示例链接？

可能是您可以这样做，您可以使用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;
    }
}

功能主控制器（$scope）{
$scope.styles=[{“name”：“walking”}、{“name”：“Food”}、{“name”：“culture”}]；
$scope.tours=[{“Tourname”：“天空漫步”，风格：“漫步”}，{“Tourname”：“阿克拉市场”，“风格”：“美食，漫步”}]；
$scope.selected=功能（巡更）{
对于（变量i=0；i<$scope.styles.length；i++）{
var style=$scope.style[i]；
if（style.selected==“true”&&tour.style.indexOf（style.name）>=0）{
返回true；
}
}
返回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>

{{style}}
旅行
{{tour}

---

这里是

可能您可以这样做，您可以使用带有功能的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;
    }
}

功能主控制器（$scope）{
$scope.styles=[{“name”：“walking”}、{“name”：“Food”}、{“name”：“culture”}]；
$scope.tours=[{“Tourname”：“天空漫步”，风格：“漫步”}，{“Tourname”：“阿克拉市场”，“风格”：“美食，漫步”}]；
$scope.selected=功能（巡更）{
对于（变量i=0；i<$scope.styles.length；i++）{
var style=$scope.style[i]；
if（style.selected==“true”&&tour.style.indexOf（style.name）>=0）{
返回true；
}
}
返回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>

{{style}}
旅行
{{tour}

---

下面是一个过滤器，它最适合从集合中过滤数据。您可以将

过滤器

过滤器与您自己的范围谓词函数一起使用：

控制器中的谓词：

$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>

查看：

$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>

{{style.name}
{{tour | json}

---

过滤器最适合过滤集合中的数据。您可以将

过滤器

过滤器与您自己的范围谓词函数一起使用：

控制器中的谓词：

$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>

查看：

$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>

{{style.name}
{{tour | json}

---

@nehemiahjacob抱歉，我对小提琴不熟悉。@nehemiahjacob抱歉，我对小提琴不熟悉。这是有效的（这是最重要的），但这可能最好在Angular中实现，作为ng repeat上的过滤器。一个好处是DOM不会被隐藏元素污染。这是可行的（这是最重要的），但这可能最好在Angular中实现，作为ng repeat上的过滤器。一个好处是DOM不会被隐藏元素污染。