Angularjs 我将动态id分配给HTML中的不同元素，但是id'；机器不能正常工作 斯诺 分配的任务 截止日期 评论 地位 删除 编辑 {{$index+1}} {{x.comments}} NA 悬而未决的 多恩 删除 更新

在这里，我使用ng repeat将动态id分配给不同的元素，并定义了与id同名的日期选择器，如datepicker8，datepicker9等。但他们没有被调用意味着他们没有在单击该元素时打开。

您需要修复HTML，因为这是无效的，您的浏览器将无法正确处理它：

<table ng-show = "noTaskAdded != 1" class="table table-hover hd-bg table-bordered">
    <thead align="center">
        <tr>                                                                                                                                                                     
            <th>SI No</th>
            <th>Assigned Task</th>
            <th>Closure Date</th>
            <th>Comments</th>
            <th>Status</th>
            <th>Delete</th>
            <th>Edit<th>
            <td width = "20%"> 
                <input class="form-control"  ng-disabled = "x.status_flag == 1"  id="{{ 'datepicker' + ($index + 8 )  }}" >
            </td>
    </thead>
    <tbody ng-repeat="x in viewParticipantsComments">
        <td>{{$index + 1}}</td>
        <td width = "30%">
            <textarea class="form-control" rows="3" cols="30"  id = "description" ng-disabled = "x.status_flag == 1" ng-model = "x.task_description"></textarea>
         </td>
         <td width = "20%"> 
             <input class="form-control"  ng-disabled = "x.status_flag == 1"  id="{{ 'datepicker' + ($index + 8 )  }}" >
         </td>
         <td ng-show = "x.status_flag == 1" width = "30%">
             <textarea class="form-control" rows="3" cols="30"  id = "description" ng-disabled = true>{{x.comments}}</textarea>
         </td>
         <td ng-show = "x.status_flag == 0">NA</td>
         <td ng-show = "x.status_flag == 0"> 
             <button class="btn btn-warning btn-sm waves-effect waves-light" alt="default">Pending</button>
         </td>
         <td ng-show = "x.status_flag == 1"> <button class="btn btn-success btn-sm waves-effect waves-light" alt="default">Done</button></td>                                                                                   
         <td>
             <button class="btn btn-danger btn-sm waves-effect waves-light" alt="default" ng-disabled = "x.status_flag == 1" ng-click = "deleteEditParticipants(x.id,x.task_description,x.closure_date,'delete')">Delete</button>
         </td>                                                                                  
         <td>
             <button class="btn btn-primary btn-sm waves-effect waves-light" alt="default" ng-disabled = "x.status_flag == 1" ng-click = "deleteEditParticipants(x.id,x.task_description,x.closure_date,'update')">Update</button>
         </td>
     </tbody>
</table>

斯诺
分配的任务
截止日期
评论
地位
删除
编辑
{{$index+1}}
{{x.comments}}
NA
悬而未决的
多恩
删除
更新

---

修复HTML后，检查JS是否正常工作，并验证代码是否真的生成了唯一id

是否尝试过ng attr id=“{{'datepicker'+（$index+8）}”。是的，我也尝试过，但我也面临着同样的问题。您的HTML完全错误。你有打开的标签，你永远不会关闭。您的循环将在每次创建tbody时创建，并且您从未在tbody中打开tr。你有一个td而不是th在thead中。只是为了提到我看到的第一件事。修复HTML并查看现在，我已经对HTML进行了必要的更改，并且看到id的生成是唯一的，但是datepicker仍然没有在单击时打开，请帮助我。发布datepicker的相关js。还假设您的js的其余部分是有效的！当放在ng repeat外部时，同一个日期选择器按预期工作。但当涉及到重复动态id创建时，它是失败的。

<table ng-show = "noTaskAdded != 1" class="table table-hover hd-bg table-bordered">
    <thead align="center">
        <tr>                                                                                                                                                                     
            <th>SI No</th>
            <th>Assigned Task</th>
            <th>Closure Date</th>
            <th>Comments</th>
            <th>Status</th>
            <th>Delete</th>
            <th>Edit<th>
            <th width = "20%"> 
                <input class="form-control"  ng-disabled = "x.status_flag == 1"  id="{{ 'datepicker' + ($index + 8 )  }}" >
            </th>
        </tr>
    </thead>
    <tbody>
    <tr ng-repeat="x in viewParticipantsComments">
        <td>{{$index + 1}}</td>
        <td width = "30%">
            <textarea class="form-control" rows="3" cols="30"  id = "description" ng-disabled = "x.status_flag == 1" ng-model = "x.task_description"></textarea>
         </td>
         <td width = "20%"> 
             <input class="form-control"  ng-disabled = "x.status_flag == 1"  id="{{ 'datepicker' + ($index + 8 )  }}" >
         </td>
         <td ng-show = "x.status_flag == 1" width = "30%">
             <textarea class="form-control" rows="3" cols="30"  id = "description" ng-disabled = true>{{x.comments}}</textarea>
         </td>
         <td ng-show = "x.status_flag == 0">NA</td>
         <td ng-show = "x.status_flag == 0"> 
             <button class="btn btn-warning btn-sm waves-effect waves-light" alt="default">Pending</button>
         </td>
         <td ng-show = "x.status_flag == 1"> <button class="btn btn-success btn-sm waves-effect waves-light" alt="default">Done</button></td>                                                                                   
         <td>
             <button class="btn btn-danger btn-sm waves-effect waves-light" alt="default" ng-disabled = "x.status_flag == 1" ng-click = "deleteEditParticipants(x.id,x.task_description,x.closure_date,'delete')">Delete</button>
         </td>                                                                                  
         <td>
             <button class="btn btn-primary btn-sm waves-effect waves-light" alt="default" ng-disabled = "x.status_flag == 1" ng-click = "deleteEditParticipants(x.id,x.task_description,x.closure_date,'update')">Update</button>
         </td>
       </tr>
     </tbody>
</table>