AngularJs

Question

我是 angularJs 的新手。有人能告诉我从 angularJs 到 html.

动态显示链接的简单且最好的方法吗

我想在 html 中动态显示 "n" (n>=0) 个按钮，我从数据库中获取 'n' 的值。假设如果 n 是 5，当我加载 html 页面时应该显示 5 个按钮，而且我想知道用户点击了哪个按钮。

任何指点都会很有帮助。

Answer 1

查看：

<button ng-repeat="n in getNumber(number) track by $index" 
        ng-click="pressed(n)">
            This button repeats n times
</button>

控制器

$scope.number = 5; // MyService.getN();

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

$scope.pressed = function(num) {
    alert("Pressed button " + num);
}

示例：jsfiddle

Answer 2

您可以使用 "ng-repeat" 指令来实现。

试试下面的代码：

HTML:

<div ng-app="app">
<div ng-controller="AppCtrl">
    <button ng-repeat="n in getArray(number)" id="button-{{$index}}" ng-click="getButtonClicked($index)" >This button repeats times</button>
</div>

脚本：

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");
            }
        });

Answer 3

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>

Plunker

Answer 4

在您的代码中使用 ng-repeat，这是最好和最简单的方法..只需查找我的 fiddle 示例..更容易.. 你会变成这样..

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

您的 angular 脚本很简单，如下所示..

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
    }
});

http://jsfiddle.net/sanjayastn/pcggeag9/

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

AngularJs - What is the best way to display buttons dynamically?

html

javascript

angularjs-directive