ng-click + ng-repeat並嘗試更改面板樣式

我正在嘗試使用單擊事件來更改我的元素樣式。我正在使用Bootstrap和Angular。ng-click + ng-repeat並嘗試更改面板樣式

這是面板，它確實顯示了我在DB中擁有的所有組。

<div class="col-sm-6 panel-group panel-hover panel-click" ng-repeat="y in allGroups " id="panel-{{$index}}"" ng-click="showGroupsMembersList(y.GroupId)"> 
     <div class="panel panel-default" > 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <p><bold>{{y.GroupName}}</bold></p> 
      </h4> 
     </div> 
     <div class="panel"> 
      <div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div> 
      <!-- <div class="panel-footer">Panel Footer</div> --> 
     </div> 
     </div> 
    </div>

點擊它後，我確實得到了所有組成員中的一些人，因爲它應該。但是我怎樣才能改變組風格？

我tryed面板點擊：

.panel-click:active{ 
    padding: 20px; 
    box-shadow: 0 0 14px 5px #31b0d5; 
}

但我想我不明白的CSS功能... 還試圖通過ID來獲得元素，但每次我送ID爲NG而單擊功能該功能卡住，不工作...

請幫助！

來源

2017-06-14 lolu

那麼你想動態應用CSS類嗎？如果是這樣，你可以看看[ngClass]（https://docs.angularjs.org/api/ng/directive/ngClass） – JeanJacques

[Here]（https://plnkr.co/edit/D4pL1QzGABNsYoDUzh3z?p=preview ）是使用'ngClass'的一個例子 – JeanJacques

可以使用

ng-click="y.customVariable=!y.customVariable" ng-class="{'active':y.customVariable}"

等;

<div class="col-sm-6 panel-group panel-hover" ng-repeat="y in allGroups" ng-click="y.customVariable=!y.customVariable" ng-class="{'active':y.customVariable}"> 
    <div class="panel panel-default" > 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <p><bold>{{y.GroupName}}</bold></p> 
     </h4> 
    </div> 
    <div class="panel"> 
     <div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div> 
     <!-- <div class="panel-footer">Panel Footer</div> --> 
    </div> 
    </div> 
</div>

，然後你可以用「活躍」類

.active{/* do something */}

來源

2017-06-14 14:28:12

<div class="col-sm-6 panel-group" ng-repeat="y in allGroups " id="panel-{{$index}}"" ng-click="showGroupsMembersList(y.GroupId)"> 
    <div class="panel panel-default" ng-class="{'active-panel': y.id == selectedPanel}"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <p><bold>{{y.GroupName}}</bold></p> 
     </h4> 
    </div> 
    <div class="panel"> 
     <div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div> 
     <!-- <div class="panel-footer">Panel Footer</div> --> 
    </div> 
    </div> 
</div>

，你可以在你的控制器類似的東西補充：

function showGroupsMembersList(id){ 
// your code 
// and then add 
$scope.selectedPanel = id; 
}

在你的CSS

現在

.active-panel{ 
    padding: 20px !important; 
    box-shadow: 0 0 14px 5px #31b0d5 !important; 
}

來源

2017-06-14 14:37:41

使用ng級。假設您想要根據點擊更改面板的背景顏色。

在你的HTML：添加納克級的活躍，NG-點擊功能：setSelectedY

<div class="col-sm-6 panel-group panel-hover panel-click" ng-repeat="y in allGroups" ng-click="showGroupsMembersList(y.GroupId); setSelectedY(y._id)" ng-class="{active: y._id === idSelectedY}"> 
    Rest of your code here< 
/div>

在你的控制器，

// set default selected Y to null 
$scope.idSelectedY = null; 
// switch selected Y to active element 
$scope.setSelectedY = function (idSelectedY) { 
    $scope.idSelectedY = idSelectedY; 
};

在你的CSS文件

.active {background-color: #ccc}

這些代碼行應該工作！

來源

2017-06-14 14:52:47

ng-click + ng-repeat並嘗試更改面板樣式

回答

相關問題