ng.在角度中检查.js不使用HTML附加

ng.checked in angular.js not working with HTML appending

本文关键字：HTML 附加 js 检查 ng      更新时间：2023-09-26

这是一个待办事项应用程序。当您在输入中键入某些内容时，新代码将追加到 div.container 。然后是带有ng-checked="checkAll"的"新生儿"复选框（它应该选中 container 中的所有复选框）没有响应主复选框中的更改，并带有 ng-model="checkAll" .在那段时间里，已经存在的带有ng-checked的辅助复选框正在响应主复选框。如何解决？

<body ng-app="App" ng-controller="AppCtrl">
<h1 class="heading">TODODO!</h1>
<div class="container">
    <form ng-submit="newTask()">
        <input type="checkbox" ng-model="checkAll">
        <input type="text" ng-model="text" name="text" placeholder="What tododo?">
    </form>
    <input type="checkbox" ng-checked="checkAll">
</div>
</body>

脚本： 

var App = angular.module("App", []);
App.controller('AppCtrl', function ($scope) {
    $scope.list = [];
    $scope.newTask = function () {
        if ($scope.text) {
            $('.container').append("<div class='task'><input type='checkbox' ng-checked='checkAll'/>" + this.text + "</div>");
            $scope.list.push(this.text);
            $scope.text = '';
        }
    };
});

问题是两个复选框都使用相同的模型。为每个模型创建一个不同的模型，并进行 ng 检查。如果您不想在选中一个复选框时影响任何其他复选框，则该复选框显示具有自己的属性名称。例如：

<body ng-app="App" ng-controller="AppCtrl">
<h1 class="heading">TODODO!</h1>
<div class="container">
    <form ng-submit="newTask()">
        <input type="checkbox" ng-model="doNotAffectSecond" ng-checked="doNotAffectSecond">
        <input type="text" ng-model="text" name="text" placeholder="What tododo?">
    </form>
    <input type="checkbox" ng-model="doNotAffectFirst" ng-checked="doNotAffectFirst">
</div>
</body>

这是一般的，您可以自定义它。在您的情况下，如果您选中第一个复选框，则checkAll将为真，第二个将自动选中。

相关文章：