javascript - 在 ng-repeat 中隐藏元素

Question

我有一个这样格式的数组:

var arr = [{ source: "Hello", target: "Bonjour" },
           { source: "Good morning" },
           { source: "Bye" },
           { source: "Good night" }];

我用以下方式在 html 中表示它:

<input type="text" ng-model="searchSource">

<div ng-repeat="element in arr | filter: {source: searchSource} track by $index>
    <strong>{{element.source}}</strong>
    <br>
    <input type="text" ng-model="element.target">
    <br>
</div>

我需要制作一个按钮，它将隐藏带有 target 的元素属性(property)。我首先在过滤器的帮助下完成了它，然后尝试使用 ng-hide。它有效，它隐藏元素 target但是当我开始写一些东西到另一个<input>文件它们会立即隐藏，我不需要这种行为。

我只需要在按下按钮时隐藏元素，而不是在输入文本时。行为应如下所示:
1)按下按钮，用target隐藏元素.它隐藏了 arr 的第一个元素因为它有target .所以现在屏幕上有 3 个元素。
2)在第二个元素中输入一些文本，它不应该被隐藏。
3) 按下按钮，显示所有元素。
4) 再次按下按钮，现在第一个和第二个元素被隐藏了，因为它们有 target

Answer 1

为此，您只能暂时隐藏该元素。不隐藏作为观察者。我就是这样做的。一键隐藏，它将检查您的所有元素并隐藏所需的元素。一个我们将打开你所有的元素。当您不再点击隐藏按钮时，您的项目将不会被隐藏。

<input type="text" ng-model="searchSource">
          <button ng-click="hideElement()">Hide</button>
          <button ng-click="isHide = false;">Open</button>
    <div ng-repeat="element in arr | filter: {source: searchSource} track by $index">
        <div ng-hide="element.isHide && isHide">
            <strong>{{element.source}}</strong>
            <br>
            <input type="text" ng-model="element.target"> 
            <br>
        </div>
    </div>

然后您将有一个 var 来隐藏或不隐藏所有元素。加上假设隐藏某些特定元素的功能。

$scope.isHide = false;

$scope.hideElement = function(){
  $scope.isHide = true;
  for(i = 0; i <$scope.arr.length ; i++){
    if($scope.arr[i].target){
        $scope.arr[i].isHide = true;  
    }
}

此函数是手动运行的，因此当您更改 element.target 的值时它不会启动

Working Fiddle