gpt4 book ai didi

javascript - ng-show 在 ng-repeated 列表中

转载 作者:行者123 更新时间:2023-11-27 22:46:30 25 4
gpt4 key购买 nike

所以我需要 .overlay div 来显示何时选择列表中的项目。 ng-show 适用于“p”或类似的字符,但不适用于当前的显示?任何帮助真的很感激! JSfiddle

HTML 代码:

<body ng-app="myapp">
<div ng-controller="MyController" class="app">
<ul>
<input type="text" ng-model="queryStyle" />
<li ng-repeat="style in style | filter:queryStyle" ng-class="{active:( $parent.selectedStyle == $index)}" ng-click="$parent.selectedStyle = $index;$parent.style.doClick(style);show == !show">
<h1>{{style.id}}</h1></li>
</ul>
<div class="overlay" ng-show="show">
<h2>{{styleTags}}</h2>
</div>
</div>
</body>

Controller :-

angular.module("myapp", []).controller("MyController", function($scope) {
$scope.myData = {};
$scope.style = [{
id: "1",
style: "one"
}, {
id: "2",
style: "Two"
}, {
id: "3",
style: "Three"
}];
$scope.style.doClick = function(style) {
$scope.styleTags = style.style;
}
$scope.toggle = function(item) {
item.selected = !item.selected;
};
$scope.filterFunction = function(element) {
return element.name.match(/^Ma/) ? true : false;
};

});
CSS:
.overlay {
position: fixed;
top: 0;
margin - left: auto;
margin - right: auto;
height: 100 % ;
width: 100 % ;
background: rgba(255, 255, 255, .85)
}
.active {
background - color: red;
}

最佳答案

您的代码有错误,已被删除。我几乎没有改变什么。

  1. 这个 show == !show 不是一个作业,它是 show =!show切换。

  2. 您不需要在 ng-click 上编写表达式,而是创建一个函数并在那里进行编码。

  3. 您不需要 $parent 来访问本地函数

这是Working Fiddle

<div ng-controller="MyController" class="app">
<ul>
<input type="text" ng-model="queryStyle" />
<li ng-repeat="style in style | filter:queryStyle"
ng-class="{active:( selectedStyle == $index)}"
ng-click="doClick(style, $index);">
<h1>{{style.id}}</h1></li>
</ul>
<div class="overlay" ng-show="showOverlay">
<h2>{{styleTags}}</h2>
</div>

        $scope.showOverlay = false;
$scope.myData = {};
$scope.style = [{
id: "1",
style: "one"
}, {
id: "2",
style: "Two"
}, {
id: "3",
style: "Three"
}];
$scope.doClick = function (style, index) {
$scope.selectedStyle = index;
$scope.styleTags = style.style;
$scope.showOverlay = true;

}

关于javascript - ng-show 在 ng-repeated 列表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38375128/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com