Create div dynamically on option select in AngularJS

Question

I am trying to create divs dynamically using option select value but ng-repeat not working. Let me know what I am doing wrong here.

Following is my HTML code -

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>Select Example - AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
    <select id="shiftnumbers"
            ng-model="event.shiftnumber"
            ng-options="timeslot.value as timeslot.name for timeslot in shiftnumbers"
            ng-init="event.shiftnumber = shiftnumbers[0].value"
            class="btn">
    </select>
    <div ng-repeat="event.shiftnumber">{{event.shiftnumber}}</div>
</body>
</html>

Following is my Script -

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope){

    $scope.shiftnumbers = [];
    for(var i=0; i< 23; i++) {
        $scope.shiftnumbers.push({name: i, value: i});
    }
});

PLNKR LINK - http://plnkr.co/edit/UruYYbXrTgxqXadIb8A3?p=preview

Take a look at this question [AngularJS For Loop with Numbers & Ranges](http://stackoverflow.com/questions/11873570/angularjs-for-loop-with-numbers-ranges) — Gruff Bunny, Aug 27 '14 at 09:33
@GruffBunny Thx for the link..I applied the range method here..but feel what satpal suggested fitted in my case too closely :) — Trialcoder, Aug 27 '14 at 09:48

Satpal · Accepted Answer · 2014-08-27T09:40:18.130

1

Create a new array selectedShiftnumbers to store selected values. Then use ngRepeat to list it.

HTML

<select id="shiftnumbers"
        ng-model="event.shiftnumber"
        ng-change="addShiftNumber(event.shiftnumber)"
        ng-options="timeslot.value as timeslot.name for timeslot in shiftnumbers"
        ng-init="event.shiftnumber = shiftnumbers[0].value"
        class="btn">
</select>
<div ng-repeat="shiftnumber in selectedShiftnumbers">
  {{shiftnumber}}
</div>

Script

$scope.addShiftNumber = function(num){
  $scope.selectedShiftnumbers = [];
  for(var i=0; i< num; i++) {
    $scope.selectedShiftnumbers.push(i);
  }
}

DEMO

edited Aug 27 '14 at 09:40

answered Aug 27 '14 at 09:32

Satpal

132,252
13
159
168

1

but they are not creating that number of divs..that means if I select 10 then it must create 10 divs not a single div with number 10 – Trialcoder Aug 27 '14 at 09:34
1

@Trialcoder, Updated answer just slightly modified `addShiftNumber` function – Satpal Aug 27 '14 at 09:40

Create div dynamically on option select in AngularJS

1 Answers1