切换类以选择带角度的商品

时间:2015-06-23 10:16:26

标签: javascript angularjs

我尝试做出一些事情,我试图弄明白。我想只为点击的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;
});

2 个答案:

答案 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 }"

http://codepen.io/anon/pen/EjbKQe?editors=101