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>

（这只是表格的一部分）。

我的问题是当我尝试检查用户之前选择的那些语言时。我试过（例如）ocument.getElementById("AA").checked = true;（这将是列表中的第二种语言），我收到一条错误，指出TypeError: Cannot set property 'checked' of null。我的猜测是DOM仍然不知道这个元素（“AA”）。也试图在$( document ).ready(function() {...});内得到相同的结果。

任何建议都将受到赞赏。

Answer 1

您可以在复选框上使用ng-checked，而不是通过document.getElementById（）进行操作：

文档就绪错误更新说明：

您要访问的内容是在角度编译之后，当文档就绪时，文档上只有未编译的角度语法，因为@charlietfl注释，document.ready在角度中无用。

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

由ng-repeat生成的元素无法执行

1 个答案: