隐藏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属性的元素。 我首先借助过滤器完成了该任务，然后尝试了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的值时它将不会启动element.target

工作小提琴