Get integer value from input and create bootstrap panel by ng-repeat

Question

i am working on social network project which base on Itinerary Organizer and i am beginner level in Angular.. i want to get value from input and create Panels dynamically by pass value to ng-repeat attribute.. and that single Panel should be four inputs and generate set of inputs by clicking a button.. i am sharing the image of panel and inputs..Thank you

Post the code you have so far. Like the code for a single panel of inputs. — Carol Skelly, Feb 08 '17 at 16:20

score 1 · Answer 1 · answered Feb 08 '17 at 16:47

Create an array for the days in your Angular scope. Then use ng-repeat for the panels and a function to update the number of days.

myApp.controller('myController',['$scope',function($scope){
    //initialize days and daysArray
    $scope.days = 0;
    $scope.daysArray = [$scope.days];

    $scope.updateDays = function(){
        $scope.daysArray = Array.apply(null, {length: $scope.days}).map(Number.call,Number);
    };
}]);

http://www.codeply.com/go/HA8S1BOOA0

score 1 · Answer 2 · answered Feb 08 '17 at 17:17

Added +1 for ZimSystem reply.

I will just add one more point, move your dynamic panel code to angular directive. This will keep make any future extension easy. See this for a demo https://plnkr.co/edit/EpUTeiLgHWPr1YFAwSys?p=preview

angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.NoOfDays = "";
  $scope.Days = [];
  $scope.Add = function()
  {
    $scope.Days = [];
    if($scope.NoOfDays != "")
    {
      for(i=0; i < $scope.NoOfDays;i++)
      $scope.Days.push(i);
    }
    $scope.NoOfDays = "";
    };
}])
.directive('myCustomer', function() {
  return {
    //your dynamic panel html 
    templateUrl: 'my-customer.html'
  };
});

stackg91 · Answer 3 · 2017-02-08T17:40:19.977

0

Hey what you could do is this

HTML:

<input ng-model="number">

<div ng-repeat="i in getNumber(number) track by $index">
    //panel html
</div>

In Controller:

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);   
}

Fiddle

edited Feb 08 '17 at 17:40

answered Feb 08 '17 at 16:39

stackg91

584
7
25

I don't think this will work as `new Array(num)` creates an empty array with no elements. – Carol Skelly Feb 08 '17 at 16:56
OFC it works ist creates an Array with number of entries provided – stackg91 Feb 08 '17 at 17:02
Have you tried it? new Array(n) creates an EMPTY array of n length but you still need to add elements to it. [See here](http://stackoverflow.com/questions/3746725/create-a-javascript-array-containing-1-n) – Carol Skelly Feb 08 '17 at 17:08
Ah what i missed is track by Index then it works in my code – stackg91 Feb 08 '17 at 17:31
http://jsfiddle.net/sh0ber/cHQLH/ – stackg91 Feb 08 '17 at 17:37

Get integer value from input and create bootstrap panel by ng-repeat

3 Answers3

Linked