JSFiddle - React, Tailwind, and code Playground

by Zhelyakea

HTML

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body ng-app="exampleApp" ng-controller="PhoneListCtrl ">
<button id="{{phone.id}}"
    value="{{phone.coast}}"
    ng-repeat="phone in phones" 
    ng-class="{'button': !isActive, 'button active': isActive}"
    ng-click="isActive = !isActive" class="btn btn-large btn-success">{{phone.name}}</button>
 <br><button ng-click="foo()"class="btn btn-large btn-success">Отправить</button>
     <input value="{{summ()}}"></input>
</body>

CSS

button{
    display:inline-block;
    margin:5px;
    width:120px;
}
.button.active {
  background-color:#FF9900;
}

JavaScript

var app = angular.module("exampleApp", []);

function PhoneListCtrl($scope) {   
   $scope.phones = [
       {"name": "Услуга 1","id": "1","clas": "1", "coast": "100"},
        {"name": "Услуга 2","id": "2","clas": "0", "coast": "200"},
        {"name": "Услуга 3","id": "3","clas": "1", "coast": "300"},
    ];
    $scope.isActive = false;
    $scope.foo = function($scope){
        var links = document.getElementsByClassName("active");
        var values = [].map.call(links, function (el) {
            return el.getAttribute("id");
        });    
        alert(values);
        angular.element('#3').css('active',true);
    };
    
    $scope.summ = function($scope){
        var links = document.getElementsByClassName("active");
        var values = [].map.call(links, function (el) {
            return el.getAttribute("value");
        });  
        summa = function(m) {
        for(var s = 0, k = m.length; k; s += parseInt(m[--k]));
        return s;
        };
        summ=summa(values);
        return summ;
    };
}