我有一个这样格式的数组:
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
最佳答案
为此,您只能暂时隐藏该元素。不隐藏作为观察者。我就是这样做的。一键隐藏,它将检查您的所有元素并隐藏所需的元素。一个我们将打开你所有的元素。当您不再点击隐藏按钮时,您的项目将不会被隐藏。
<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
的值时它不会启动
关于javascript - 在 ng-repeat 中隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32142205/