javascript - Angular.js 在输入 :checkbox 中将 ng-model 与 ng-repeat 绑定(bind)

Question

我有一个使用 Angularjs v1.69 的应用程序我得到一个时隙的 Json 响应以下是当前代码:

$scope.TimeSlotList = JSON.parse(localStorage.getItem("TimeSlots"));
Console.log($scope.TimeSlotList);

输出:

[
{
    "id": 1,
    "time": "7am - 10am"
},
{
    "id": 2,
    "time": "10am - 1pm"
},
{
    "id": 3,
    "time": "1pm - 4pm"
},
{
    "id": 4,
    "time": "4pm - 7pm"
},
{
    "id": 5,
    "time": "7pm - 10pm"
}
]

这是在局部完成的

        <div class="col-md-6">
                <div class="form_pad20">
                    <label>Prefered Time</label>
                    <div class="clearfix">
                        <div class="form-field field-destination">
                            <div class="radio-checkbox display_inline" ng-repeat="x in TimeSlotList">
                                <input id="check-{{x.id+9}}" type="checkbox" class="checkbox" ng-model="TimeSlotList[$index]">
                                <label for="check-{{x.id+9}}">{{x.time}}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

所需的输出是选择哪个复选框我想要那个值例如:如果用户选择时隙 2 和 3我想发送 23 到后端即 Timeslot-2 和 Timeslot-3 应该返回 true或者其他我想要输出的东西

var FinalTime="23";

试图找出最近 2 天的数据但经过几次尝试，基本上最好的解决方案是

ng-model="TimeSlot-{{x.id}}"

但是这个错误

Error: [ngModel:nonassign] Expression 'ScdItem.TSlot(x.id)' is non-assignable.

请问有人能帮帮我吗？

Answer 1

更改TimeSlotList，使其包含一个selected 字段。初始值可以设置为false。

$scope.TimeSlotList = JSON.parse(localStorage.getItem("TimeSlots"));
$scope.TimeSlotList.forEach(item => item.selected = false);

然后使用ng-model将selected字段绑定(bind)到相应的复选框:

<input id="check-{{x.id+9}}" type="checkbox" class="checkbox" ng-model="x.selected">

这将根据选中/未选中复选框更改选中的值。当您将数据发送到服务器时，您可以根据 selected 字段的值提取插槽的 ID，如下所示:

var selectedSlots = $scope.TimeSlotList
  .filter(slot => slot.selected) // Get all the selected slots
  .map(slot => slot.id) // Extract IDs of the slots
  .join(''); // Join the IDs to form a string

这样 selectedSlots 将包含所选插槽的 ID。