AngularJS Tutorial - Create Button from data in scope

The following code shows how to Create Button from data in scope.

Example


<!DOCTYPE html>
<html  ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script type='text/javascript'>
function ctrl($scope) {<!-- w w w.java  2  s.  c o  m-->
    $scope.btns = [{
        label: "One",
        state: false
    }, {
        label: "Two",
        state: true
    }, {
        label: "Three",
        state: false
    }];

    $scope.toggle = function () {
        this.b.state = !this.b.state;
    };
}
</script>
</head>
<body ng-app ng-controller="ctrl">
  <button ng-click="toggle()" ng-class="{on:b.state}" ng-repeat="b in btns">{{b.label}}</button>
</body>
</html>

The code above is rendered as follows: