打开用弹出窗口单击的div

时间:2015-09-05 07:52:26

标签: angularjs

问题是我在click打开所有div。

我只希望打开包含其内容的div。

openBigDiv功能是:

$scope.IsHidden = true; 

$scope.openBigDiv = function {
    $scope.IsHidden = $scope.IsHidden ? false : true; 
} 

我使用ng-click在div中调用函数。

1 个答案:

答案 0 :(得分:0)

您可以使用可见性标志数组

HTML:

<div ng-app="testApp">
    <div ng-controller="testController">
        <div>
            <button ng-click="showElem('elem1');">Show elem1</button>
            <div ng-show="IsElemVisible('elem1')">elem1</div>
            <button ng-click="showElem('elem2');">Show elem2</button>
            <div ng-show="IsElemVisible('elem2')">elem2</div>
        </div>
    </div>
</div>

如果您想使用循环,请使用HTML:

<div ng-app="testApp" ng-init="myElems=['elem1','elem2','elem3']">
    <div ng-controller="testController">
        <div ng-repeat="elem in myElems">
            <button ng-click="showElem(elem);">Show {{elem}}</button>
            <div ng-show="IsElemVisible(elem)">{{elem}}</div>
        </div>
    </div>
</div>

Javascript:

var app = angular.module('testApp', []);
app.controller('testController', function ($scope, $location, $rootScope, $log) {
    $scope.hiddenElements = [];
    $scope.IsElemVisible = function(elemId) {
        return $scope.hiddenElements[elemId];
    }
    $scope.showElem = function (elemId) {
        $scope.hiddenElements[elemId] = true;
    }
});

Fiddle