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 - 動態顯示按鈕的最佳方式是什麼？

回答

相關問題