Question

所以我需要.overlay div来显示列表中的项目何时被选中。 ng-show适用于＆＃39; p＆＃39;或类似的，但它没有这个当前的显示？任何帮助真的很感激！ 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>

控制器： -

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;
    }

Answer 1

您的代码有错误已被删除。我改变的东西很少。

此initializeApp不是作业，而是show == !show 切换。
您无需在show =!show上编写表达式而是创建表达式功能并在那里进行编码。
您不需要ng-click来访问本地功能

以下是Working Fiddle

$parent

<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>

Answer 2

你可以实现这一点，我将过滤后的样式的输出变成一个变量，然后根据它隐藏你的重叠div。

<div ng-controller="MyController" class="app">
      <ul>
        <input type="text" ng-model="queryStyle" />
        <li ng-repeat="style in styles | filter:queryStyle as filteredStyles"><h1>{{style.id}}</h1></li>
    </ul>    
    <div class="overlay" ng-show="filteredStyles.length > 0 && styles.length > filteredStyles.length">
    <h2>Selected Style is {{filteredStyles[0].style}}</h2>
        </div>
    </div>

    </body>

检查更新后的小提琴：https://jsfiddle.net/zvhqvzjt/8/

我已将样式数组更改为样式，并删除了一些不必要的doclick和切换代码。

我还删除了覆盖类css，因为它只对整个屏幕进行了读取，如果需要，可以再次添加。

ng-show在ng-repeated列表中

2 个答案: