AngularJs - Каков наилучший способ отображения кнопок динамически?

Я новичок в angularJs. Может ли кто-нибудь указать мне простой и лучший способ динамически отображать ссылки с angularJs на html.AngularJs - Каков наилучший способ отображения кнопок динамически?

Я хочу отображать «n» (n> = 0) кнопки в html динамически, где я получаю значение «n» из db. Предположим, что если n - 5, 5 кнопок должны отображаться при загрузке html-страницы и также я хочу знать, какую кнопку нажать на кнопку.

Любые указатели были бы очень полезными.

источник

2015-03-13 Prash

вы можете добиться этого с помощью "нг-повторить" директиву.

Попробуйте код ниже:

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 для этого, а вместо этого использовать синтаксис «Контроллер как 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

В Angular 2.0 больше не будет $ scope, этот контроллер будет синтаксисом. Более подробную информацию (и другие причины использования контроллера в качестве синтаксиса) можно найти здесь: https://docs.angularjs.org/api/ng/directive/ngController (см. Раздел «Пример») – CodeBreakers

Полезно знать, спасибо! – devqon

использование нг-повтора в коде, который является лучшим и самым легким 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 - Каков наилучший способ отображения кнопок динамически?

ответ

Смежные вопросы