Я присваиваю динамический идентификатор другому элементу в HTML, но идентификаторы не работают должным образом

Question

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

Здесь я использую ng-repeat, чтобы назначить динамические идентификаторы другому элементу, и я определил указатели даты с одинаковыми именами идентификаторов, такие как datepicker8, datepicker9 и т. Д. Но они не получают вызов, значит они не открываются на щелчок этих элементов.

Answer 1

Вам нужно исправить свой 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>
            <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>

После исправления HTML проверьте, работает ли ваш JS, и проверьте, действительно ли ваш код генерирует уникальные идентификаторы