javascript - ng-repeat生成的元素无法被操作

Question

我有一个页面，其中(应该!)显示了用户之前的选择，然后他/她可以更改所选语言。

为此，我准备了以下代码:

 ...

    <tbody>
        <tr ng-repeat="One_Lang in Languages_List.Languages">
            <td align="center">
                <input id="{{One_Lang.code}}" ng-click="Handle_Language_Select(One_Lang.code)" type="checkbox" style="width:20px; height:20px;margin:5px 20px 5px 20px">
            </td>
            <td align="left" style="max-width:200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                {{One_Lang.name}}
            </td>
            <td align="left" style="max-width:300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                ({{One_Lang.nativeName}})
            </td>
        </tr>
    </tbody>

  ...

得到如下内容:

<table>
    <tbody>
        <!-- ngRepeat: One_Lang in Languages_List.Languages --><tr ng-repeat="One_Lang in Languages_List.Languages" class="ng-scope">
            <td align="center">
                <input id="AB" ng-click="Handle_Language_Select(One_Lang.code)" type="checkbox" style="width:20px; height:20px;margin:5px 20px 5px 20px">
            </td>
            <td align="left" style="max-width:200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="ng-binding">
                Abkhaz
            </td>
            <td align="left" style="max-width:300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="ng-binding">
                (аҧсуа)
            </td>
        </tr><!-- end ngRepeat: One_Lang in Languages_List.Languages --><tr ng-repeat="One_Lang in Languages_List.Languages" class="ng-scope">
            <td align="center">
                <input id="AA" ng-click="Handle_Language_Select(One_Lang.code)" type="checkbox" style="width:20px; height:20px;margin:5px 20px 5px 20px">
            </td>
            <td align="left" style="max-width:200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="ng-binding">
                Afar
            </td>
            <td align="left" style="max-width:300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="ng-binding">
                (Afaraf)
            </td>
        </tr><!-- end ngRepeat: One_Lang in Languages_List.Languages --><tr ng-repeat="One_Lang in Languages_List.Languages" class="ng-scope">
            <td align="center">
                <input id="AF" ng-click="Handle_Language_Select(One_Lang.code)" type="checkbox" style="width:20px; height:20px;margin:5px 20px 5px 20px">
            </td>
            <td align="left" style="max-width:200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="ng-binding">
                Afrikaans
            </td>
            <td align="left" style="max-width:300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="ng-binding">
                (Afrikaans)
            </td>
        </tr>
        
        <!-- Etc... -->
        
    </tbody>

</table>

(这只是表格的一部分)。

我的问题是当我尝试检查用户之前选择的那些语言时。我尝试了(例如)document.getElementById("AA").checked = true;(这将是列表中的第二种语言)，但我收到一条错误，指出 TypeError: Cannot将属性“checked”设置为 null。我的猜测是这个元素(“AA”)仍然不为 DOM 所知。还尝试将其放在 $( document ).ready(function() {...}); 中，得到相同的结果。

Answer 1

您可以使用ng-checked在您的复选框上，而不是通过 document.getElementById() 进行操作:

更新文档就绪错误说明:

你要访问的是在 Angular 编译之后，当文档准备好时，你的文档上只有未编译的 Angular 语法，正如@charlietfl注释，document.ready在 Angular 中是无用的。

 <tbody>
  <tr ng-repeat="One_Lang in Languages_List.Languages">
   <td align="center">
    <input id="{{One_Lang.code}}" ng-checked="userSelectPrevious===One_Lang.code" ng-click="Handle_Language_Select(One_Lang.code)" type="checkbox" style="width:20px; height:20px;margin:5px 20px 5px 20px">
   </td>
   ........
  </tr>
 </tbody>