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

时间:2016-01-17 14:32:57

标签: javascript jquery angularjs

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

为此,我准备了以下代码:      ...

    <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() {...});内得到相同的结果。

任何建议都将受到赞赏。

1 个答案:

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