Javascript 变量在 Angularjs ng-repeat 更改后未更新 DOM

Question

我有一个 angular 应用程序，它从 JSON 文件中提取数据，该文件通过指令模板为使用 ng-repeat 的用户填充网页。

最初加载页面时，(p) 元素中的 ID（来自 json 文件）为 1。

<p id="pollidholder" style ="display:none" ng-bind-html="item.id">{{item.id}}</p>

一旦用户按下按钮（下一步，ng-click），ID 将通过指令模板在 <p> 元素中更新 2 。我正在使用 ID 来注册用户输入。

在我的后端 Javascript (uservotedd.js)，我正在使用

var pollidholder1 = document.getElementById('pollidholder').innerHTML;

从 <p> 元素中提取 ID。

但是，即使在页面本身上更改了 <p> 元素，var pollidholder 的 ID 也不会从 1 更新为 2。

html <p> 元素更改后如何更新我的 Javascript 变量？请帮忙。我想避免对我的代码进行重大重写。请注意，当用户点击提交按钮时，警报消息不会更新以反映 ID 的变化。

请在此处找到 plunker 示例 https://embed.plnkr.co/3kIxhW2Iq5lKQm81csln/

Answer 1

只是不要在您的 html 中使用 onclick：

<div class="simple-button" onlclick="idchange()" ng-click="change()" style ="font-size: 4vw ">Next</div>

把idchange的所有代码放到controller的change函数中，你就可以访问到你需要的所有变量了。例如：

$scope.change = function() {
    $scope.indexToShow = ($scope.indexToShow + 1) % $scope.items.length;
    alert($scope.items[$scope.indexToShow].id);
}

不要试图躲避angular的封装，使用onclick而不是ng-click会给初学者带来很多困惑。只需使用 ng-click 就可以了。

Javascript 变量在 Angularjs ng-repeat 更改后未更新 DOM

Javascript variables not updated after Angularjs ng-repeat changes made to DOM

javascript

directive

angularjs