我尝试做出一些事情,我试图弄明白。我想只为点击的div添加一个类。如果单击div编号1并单击div编号2,则该类将从div1中删除并添加到div2。希望你明白。
这里是codepen说明我的问题
HTML
<div class="container" ng-app="AboApp">
<h3>NOS ABONNEMENTS</h3>
<div class="row db-padding-btm db-attached" ng-controller="AboCtrl">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" ng-repeat="abos in abo">
<div class="db-wrapper" ng-click="zone()">
<div class="db-pricing-eleven db-bk-color-two" select-me="areaStatus">
<div ng-class="{'price' : !areaStatus, 'price pop' : areaStatus}">
{{abos.tarif}}<sup>€</sup>
<small>par mois</small>
</div>
<div class="type">
{{abos.nom}}
</div>
<ul>
<li><i class="icon-ok"></i>{{abos.communication}}</li>
<li><i class="icon-ok"></i>{{abos.vers}}</li>
<li><i class="icon-ok"></i>{{abos.zone}}</li>
</ul>
<div class="pricing-footer" ng-show="areaStatus">
<a href="#" class="btn db-button-color-square btn-lg">VALIDER</a>
</div>
</div>
</div>
JS
var app = angular.module("AboApp", []);
app.controller("AboCtrl", function($scope) {
$scope.abo = [
{
"id": 1,
"nom": "BAS PRIX",
"tarif": "2.49",
"communication": "2h de communication",
"vers": "vers fixes et mobiles",
"zone": "zone nationale"
},
{
"id": 2,
"nom": "NATIONAL",
"tarif": "9.99",
"communication": "t\u00e9l\u00e9phonie et SMS illimit\u00e9s",
"vers": "vers fixes et mobiles",
"zone": "zone nationale"
},
{
"id": 3,
"nom": "EURO",
"tarif": "19.99",
"communication": "t\u00e9l\u00e9phonie et SMS illimit\u00e9s",
"vers": "vers fixes et mobiles",
"zone": "zone EURO"
}
];
$scope.areaStatus = false;
$scope.zone = function() {
$scope.areaStatus = !$scope.areaStatus;
}
});
app.directive("selectMe", function($animate) {
return function(scope, element, attrs) {
scope.$watch(attrs.selectMe, function(newVal) {
if (newVal) {
$animate.addClass(element, "popular")
} else {
$animate.removeClass(element, "popular")
}
})
}
});
app.controller("OptionsCtrl", function($scope, $http) {
$http.get('http://local.tel4g/options.json').
success(function(data) {
$scope.options = data['data'];
});
$scope.areaStatus = false;
});
app.controller("PhonesCtrl", function($scope, $http) {
$http.get('http://local.tel4g/phones.json').
success(function(data) {
$scope.phones = data['data'];
});
$scope.areaStatus = false;
});
答案 0 :(得分:1)
这是我所做的,可能足够接近你想要做的事情,它有简单的js和css
@echo off
setlocal EnableExtensions EnableDelayedExpansion
cls
:User_input
Set/p "input=Username>"
set letter=%input:~0,1%
:Check_server
If "%Letter%" == "a" (
Goto ServerA
)
if "%Letter%" == "b" (
Goto ServerB
)
Goto END
:ServerA
icacls \\ServerA\%input% /grant username_or_usergroup:F /t /q
Ren \\ServerA\%input% \\ServerA\%input%_old
Goto END
:ServerB
icacls \\ServerB\%input% /grant username_or_usergroup:F /t /q
Ren \\ServerB\%input% \\ServerB\%input%_old
Goto END
:END
答案 1 :(得分:0)
我已经编辑了你的代码,当你选择一个代码时,它会为所选的div添加一个类,而那些其他的将没有那个&#39;流行的&#39;类。
$scope.selected = { id: 0 };
ng-class="{'popular': selected.id === abos.id }"