在AngularJS中的选项选择上动态创建div

Question

我正在尝试使用选项选择值动态创建div但是ng-repeat无法正常工作。 让我知道我在这里做错了。

以下是我的HTML代码-

<!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>

以下是我的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

Answer 1

创建一个新数组selectedShiftnumbers来存储所选值。 然后使用ngRepeat列出它。

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>

脚本

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

DEMO