AngularJS Toggle Buttons

by sendil J

HTML

<button ng-click="toggle()" ng-class="{on:b.state}" ng-repeat="b in btns">{{b.label}}</button>

<select ng-model="bulkUser_Selected_ZoneList" class="form-control input-md" ng-options="zone as zone.zone+'('+zone.zoneName+')' for zone in bulkUser_ZoneList_selected.allZones" multiple></select>

CSS

button.on {
    background-color: lightgreen;
}

JavaScript

function ctrl($scope) {
    $scope.btns = [{
        label: "One",
        state: false
    }, {
        label: "Two",
        state: true
    }, {
        label: "Three",
        state: false
    }];

    $scope.toggle = function () {
        this.b.state = !this.b.state;
    };
    
    $scope.bulkUser_ZoneList_selected = {
    "allZones": [
        {
            "zone": "DEV100.ZN1",
            "zoneName": "Roof Top",
            "role": null
        },
        {
            "zone": "DEV100.ZN2",
            "zoneName": "Side",
            "role": null
        }
    ]
}

}