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）再次按下按钮，现在隐藏第1和第2个元素，因为它们有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

隐藏ng-repeat中的元素

1 个答案: