CODEWITHSUNDEEP
angularjs
Don P
Don P

Reputation: 63647

Change value of angular scope when buttons are clicked

In AngularJS, I have multiple buttons that let people filter a page.

What is the conventional way to detect a button click in Angular and set the value of $scope.filter_value to the value of the button?

Should I be attaching ng-click to everything, or is there a better way?

jsfiddle: http://jsfiddle.net/9u1aqq24/

HTML

<main ng-app="myApp">
    <section ng-controller="myController">
        <h4>Filter by Role</h4>
        <div class="btn-group" ng-click="???">
            <button type="button" class="btn btn-default" data-role="frontend developer" ng-click="console.log('CLICKED');">
                Frontend
            </button>
            <button type="button" class="btn btn-default" data-role="backend developer">
                Backend
            </button>
            <button type="button" class="btn btn-default" data-role="full stack developer">
                Full Stack
            </button>
        </div>
        <h4>Filter value</h4>
        <p>{{filter}}</p>
    </section>
</main>

JS 

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope', function($scope){
    $scope.filter = null;  
}]);

Upvotes: 0

Views: 3136

Answers (3)

Cl&#225;udia Ribeiro
Cl&#225;udia Ribeiro

Reputation: 23

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

app.controller('firstCtrl', function($scope) {
  $scope.setFilter = function(type) {
    // you can put all your logic here ($http.get.. or whatever)
    $scope.filter = type;



  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">

    <h4>Filter by Role</h4>

    <div class="btn-group" ng-click="???">
      <button type="button" class="btn btn-default" data-role="frontend developer" ng-click="setFilter('frontend developer')">Frontend</button>
      <button type="button" class="btn btn-default" data-role="backend developer" ng-click="setFilter('backend developer')">Backend</button>
      <button type="button" class="btn btn-default" data-role="full stack developer" ng-click="setFilter('full stack developer')">Full Stack</button>
    </div>
    <h4>Filter value</h4>

    <p>{{filter}}</p>

  </div>
</body>

Upvotes: 1

sylwester
sylwester

Reputation: 16498

Use just ng-click="somefunction(parametr)"

and after that in your controller

$scope.somefunction = function(parametr)
{
....
}


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

app.controller('firstCtrl', function($scope) {
  $scope.setFilter = function(type) {
    // you can put all your logic here ($http.get.. or whatever)
    $scope.filter = type;



  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">

    <h4>Filter by Role</h4>

    <div class="btn-group" ng-click="???">
      <button type="button" class="btn btn-default" data-role="frontend developer" ng-click="setFilter('frontend developer')">Frontend</button>
      <button type="button" class="btn btn-default" data-role="backend developer" ng-click="setFilter('backend developer')">Backend</button>
      <button type="button" class="btn btn-default" data-role="full stack developer" ng-click="setFilter('full stack developer')">Full Stack</button>
    </div>
    <h4>Filter value</h4>

    <p>{{filter}}</p>

  </div>
</body>

Upvotes: 1

fracz
fracz

Reputation: 21248

ng-click is a natural way of handling clicks in Angular. However, for your problem you might consider radio- or checkbox- buttons. You can find such components for example in Angular-Bootstrap.

Upvotes: 1

Related Questions