Multi State button, like a switch in angularJS

Question

I want to implement a function in a table where the user can set the value of a cell by clicking on it. 3-4 states can be said, as well as the ng model attached to it.

I was looking for a toggle button in angularjs, but they were just on / off.

In short; Pressing the button sets the value as: Active, Inactive, Excluded. You are looking for a solution with several states. Any help with this is really appreciated.

Answer 1

Check out the working example below:

http://jsfiddle.net/vishalvasani/ZavXw/9/

and controller code

function MyCtrl($scope) { $scope.btnarr=0; $scope.btnTxt=["Active","Inactive","Excluded"] $scope.change=function(){ switch($scope.btnarr) { case 0: $scope.btnarr=1; break; case 1: $scope.btnarr=2 break; case 2: $scope.btnarr=0; break; } } } 

OR

Shorter controller version

 function MyCtrl($scope) { $scope.btnarr=0; $scope.btnTxt=["Active","Inactive","Excluded"] $scope.change=function(){ $scope.btnarr = ($scope.btnarr + 1) % $scope.btnTxt.length; } } 

and HTML

 <div ng-controller="MyCtrl"> <button ng-modle="btnarr" ng-Click="change()">{{btnTxt[btnarr]}}</button> </div> 

Answer 2

It's not that much.

When I create a menu in Angular, on each item I will have a "select" function, which then selects this particular object from the list ...

Creating an iterative button is even smoother:

 var i = 0; $scope.states[ { text : "Active" }, { text : "Inactive" }, { text : "Excluded" } ]; $scope.currentState = $scope.states[i]; $scope.cycleState = function () { i = (i + 1) % $scope.states.length; $scope.currentState = $scope.states[i]; // notify services here, et cetera } <button ng-click="cycleState">{{currentState.text}}</button> 

The actual array of states would not even have to be part of $scope here, if it were the only place you used these objects - the only object that you would need to have on $scope would then be the currentState that you set when you call the cycleState method.

Answer 3

Here is a fiddle with two possibilities: selecting a state from a list or cyclic clicking on a button.

http://jsfiddle.net/evzKV/4/

JS code is as follows:

 angular.module('test').directive('toggleValues',function(){ return { restrict: 'E', replace: true, template: '<div>Set Status:<div ng-repeat="value in values" class="status" ng-click="changeTo($index)">{{value}}</div><span ng-click="next()">Current Status (click to cycle): {{values[selectedValue]}}</span></div>', controller: ['$scope', '$element', function ($scope, $element) { $scope.values = ["Active", "Inactive", "Pending"]; $scope.changeTo = function (index) { $scope.selectedValue = (index < $scope.values.length) ? index : 0; }; $scope.next = function () { $scope.selectedValue = ($scope.selectedValue + 1) % $scope.values.length; // the modulo is stolen from Norguard (http://stackoverflow.com/a/18592722/2452446) - brilliant idea }; $scope.selectedValue = 0; }] }; }); 

HTML:

 <div ng-app="test"> <toggle-values></toggle-values> </div>