nick_1002 nick_1002 - 4 months ago 16
Javascript Question

ng-show in ng-repeated list

Been trying to figure this out for the past few hours and it's rather annoying...! (I'm pretty bad at Angular...). So I want the .overlay div to show when an item on the list is selected. ng-show works on a 'p' or similar, but it doesn't with this current display? Any help really appreciated!
JSfiddle
Code:

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

JS (ANGULAR):
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

Your code had mistakes which were removed. There were few thing I changed.

  1. This show == !show was not an assignment, it was show =!show for toggle.

  2. You do not need to write expressions on ng-click instead make a function and do the coding there.

  3. You don't need $parent to access the local functions

Here is the 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;

        }
Comments