我有一个页面,其中显示了以前用户选择的语言列表(应该!),然后他/她可以更改所选语言。
为此,我准备了以下代码: ...
<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() {...});
内得到相同的结果。
任何建议都将受到赞赏。
答案 0 :(得分: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>