个人中心
gpt4 book ai didi

javascript - 无法获取 angularJS 中动态添加的输入元素的表单输入元素状态

转载 作者：行者123 更新时间：2023-11-28 04:23:02 25 4
gpt4 key购买 nike 

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('validateCtrl', function ($scope, $compile) {
            $scope.createField = function () {
                var lname = '<label>LastName : </label><input type="text" name="last" ng-model = "last" required/> Valid: {{myForm.last.$valid}}<br>';
                var tdiv = document.createElement("div");
                tdiv.innerHTML = lname;
                $compile(tdiv)($scope);
                document.getElementById("container").appendChild(tdiv);
            }
        });
    </script>
    <body>
        <h2>Validation Example</h2>
        <form ng-app="myApp"
              ng-controller="validateCtrl" 
              name="myForm">
            <div id="container">
                Firstname : <input type="text" name="first" ng-model="first" required/>
                Valid: {{myForm.first.$valid}} [ Here element state is displayed whether element is valid or not correctly but if we add element dynamically with create button it is not showing either valid or not. ]

            </div>
            <button type="button" ng-click="createField();" value="Create">Create</button>
        </form>
    </body>
</html>

这里显示元素状态，无论元素是否有效，但如果我们使用创建按钮动态添加元素，则不会显示有效或无效。

最佳答案

这不起作用，因为您编译的是分离的动态输入，因此它们无法通过 FormController 注册自己。为了让它工作，你首先需要将你的元素插入到 DOM 中，然后立即编译它。所以基本上只需将 $compile(tdiv)($scope); 向下移动一行即可。最后你应该得到这个:

        $scope.createField = function () {
            var lname = '<label>LastName : </label><input type="text" name="last" ng-model = "last" required/> Valid: {{myForm.last.$valid}}<br>';
            var tdiv = document.createElement("div");
            tdiv.innerHTML = lname;
            document.getElementById("container").appendChild(tdiv);
            $compile(tdiv)($scope);
        }

关于javascript - 无法获取 angularJS 中动态添加的输入元素的表单输入元素状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45297248/

25 4 0
文章推荐： javascript - 如何从组合商店中删除商品
文章推荐： html - 如何让 YouTube 视频在 DIV 中为移动设备调整大小
文章推荐： html - 如何使用纯 css 创建响应表
文章推荐： c++ - 为什么添加填充可以让你的循环更快？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com