Javascript AngularJs-动态显示按钮的最佳方式是什么？_Javascript_Angularjs_Html_Angularjs Directive

Javascript AngularJs-动态显示按钮的最佳方式是什么？

javascript angularjs html

Javascript AngularJs-动态显示按钮的最佳方式是什么？,javascript,angularjs,html,angularjs-directive,Javascript,Angularjs,Html,Angularjs Directive,我对angularJs是新手。有人能告诉我动态显示从angularJs到html链接的简单而最好的方法吗我想在html中动态显示n>=0个按钮，从db中获取“n”值。假设n是5，当我加载html页面时，应该显示5个按钮，并且我想知道用户单击了哪个按钮任何指针都会非常有用。看看视图：示例：您可以通过使用ng repeat指令来实现这一点请尝试以下代码： HTML: 脚本： var myApp = angular.module('app',[]); myApp.contro

我对angularJs是新手。有人能告诉我动态显示从angularJs到html链接的简单而最好的方法吗

我想在html中动态显示n>=0个按钮，从db中获取“n”值。假设n是5，当我加载html页面时，应该显示5个按钮，并且我想知道用户单击了哪个按钮

任何指针都会非常有用。

看看

视图：

示例：

您可以通过使用ng repeat指令来实现这一点

请尝试以下代码：

HTML:

脚本：

var myApp = angular.module('app',[]);
        myApp.controller('AppCtrl' , function($scope){
            $scope.number = 5;
            $scope.getArray = function(num){
                var array = [];
                for(var i = 0 ; i < num;i++){
                    array[i] = i +1;
                }
                return array;
            }
            $scope.getButtonClicked = function(buttonNumber){
                alert(buttonNumber + 1 + " is clicked");
            }
        });

devqon的答案完全正确，但如果您使用Angular 1.3，最好不要使用$scope，而是使用“Controller as vm”语法。基本上，代码与上面的答案完全相同，只是基于最佳实践编写的

   app.controller('MainCtrl', function() {
        var amountOfButtons = 5;
        this.buttons= new Array(amountOfButtons);
        this.handleButtonClick = handleButtonClick;

     function handleButtonClick(index){
       console.log('Clicked: ' + index);
     }
   });

<body ng-controller="MainCtrl as vm">
       <button ng-repeat="button in vm.buttons track by $index" ng-click='vm.handleButtonClick($index)'>button {{::$index}}</button>
</body>

在代码中使用ng repeat，这是最好也是最简单的方法..只需查看我的小提琴示例..简单得多。。你将得到如下答复

<div ng-controller="MyCtrl">
    <button ng-repeat="button in buttons(number) track by $index" ng-click="click($index+1)">Button</button>
</div>

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

myApp.controller("MyCtrl", function ($scope) {
    $scope.number = 5;//predefined amount of buttons

    // ng-repeat only accepts collection as parameter
    $scope.buttons = function (noOfButtons) {
        return new Array(noOfButtons);
    }

    //this will trigger when clicked a button
    $scope.click = function(buttonNo) {
        alert("Clicked button " + buttonNo);
        //button number is tracked by $index
    }
});

如果您要使用Angular 1.3，请您用下面的语句告诉我，最好不要使用$scope，而是使用“Controller as vm”语法：在Angular 2.0中，将不再有$scope，这种控制器作为语法将是一种方式。在这里可以找到更多信息以及为什么使用控制器作为语法的其他原因：参见示例部分

   app.controller('MainCtrl', function() {
        var amountOfButtons = 5;
        this.buttons= new Array(amountOfButtons);
        this.handleButtonClick = handleButtonClick;

     function handleButtonClick(index){
       console.log('Clicked: ' + index);
     }
   });

<body ng-controller="MainCtrl as vm">
       <button ng-repeat="button in vm.buttons track by $index" ng-click='vm.handleButtonClick($index)'>button {{::$index}}</button>
</body>

<div ng-controller="MyCtrl">
    <button ng-repeat="button in buttons(number) track by $index" ng-click="click($index+1)">Button</button>
</div>

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

myApp.controller("MyCtrl", function ($scope) {
    $scope.number = 5;//predefined amount of buttons

    // ng-repeat only accepts collection as parameter
    $scope.buttons = function (noOfButtons) {
        return new Array(noOfButtons);
    }

    //this will trigger when clicked a button
    $scope.click = function(buttonNo) {
        alert("Clicked button " + buttonNo);
        //button number is tracked by $index
    }
});