gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 12:59:55 26 4
gpt4 key购买 nike

我正在尝试使用选项选择值动态创建 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>

以下是我的脚本 -

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 链接 - http://plnkr.co/edit/UruYYbXrTgxqXadIb8A3?p=preview

最佳答案

创建一个新数组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

关于javascript - 在 AngularJS 中的选项选择上动态创建 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25523396/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com