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

我是angularJs的新手。有人可以指出我简单和最好的方式来显示从angularJs到HTML的动态链接。AngularJs - 动态显示按钮的最佳方式是什么？

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

任何指针都会非常有帮助。

2015-03-13 Prash

您可以通过使用 “NG重复” 指令实现这一目标。

尝试下面的代码：

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

来源

2015-03-13 08:45:43

在ng-repeat

视图请看：

<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

来源

2015-03-13 08:16:18 devqon

从devqon答案是完全正确的，但如果你会使用角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

来源

2015-03-13 08:49:39 CodeBreakers

您能否给我指出“如果您使用Angular 1.3，最好不要使用$ scope而是使用'Controller as vm'语法”？ :) – devqon 2015-03-13 10:08:03

在Angular 2.0中，不再有$范围了，这个控制器作为语法将成为一种方式。更多信息（以及为什么要使用控制器作为语法的其他原因）可以在这里找到：https://docs.angularjs.org/api/ng/directive/ngController（请参阅示例部分） – CodeBreakers 2015-03-14 13:00:00

很高兴知道，谢谢！ – devqon 2015-03-16 09:13:03

使用NG-重复在你的代码是最好的和最简单的way..just寻找我的小提琴example..much容易.. 你将作如下..

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

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

来源

2015-03-14 08:55:01 Sanjaya

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

回答

相关问题