在AngularJS的選項選項上動態創建div

我試圖使用選項選擇值動態創建div，但ng-repeat無法正常工作。讓我知道我在這裏做錯了什麼。在AngularJS的選項選項上動態創建div

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

來源

2014-08-27 Trialcoder

看看這個問題[AngularJS For循環用數字和範圍（HTTP：//計算器。 com/questions/11873570/angularjs-for-loop-with-numbers-ranges） – 2014-08-27 09:33:30

@Gru ffBunny Thx的鏈接..我在這裏應用範圍方法..但感覺什麼satpal建議適合我的情況太緊密:) – Trialcoder 2014-08-27 09:48:47

創建一個新的陣列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

來源

2014-08-27 09:32:46 Satpal

但他們不創造這個數量的div ..這意味着，如果我選擇10，那麼它必須創建10 divs沒有一個單一的div 10號 – Trialcoder 2014-08-27 09:34:52

@Trialcoder，更新的答案只是稍加修改'addShiftNumber'功能 – Satpal 2014-08-27 09:40:30

Thx兄弟:) +1和接受 – Trialcoder 2014-08-27 09:42:40

在AngularJS的選項選項上動態創建div

回答

相關問題