Question

我正在尝试删除动态添加到表单中的输入元素。

我正在使用以下代码。

 var MyEle =  angular.element(document.getElementById('testID'));
  MyEle.remove();

并且动态添加input元素，如下所示

<ng-form name="TestForm" novalidate">
 <div class="testData">
    <input type="text" name="FirstName1" ng-model="FirstName1" ng-required="true"/>
    <input type="text" id="testID" name="FirstName2" ng-model="FirstName2" ng-required="true"/>
  </div>
</ng-form>

上面的代码正在移除元素，但即使在将数据输入第一个输入（FirstName1）元素后，表单仍显示无效。

似乎删除过程尚未完成。它不是从表单中删除。但是我无法在页面上看到它。

Answer 1

使用ng-if，避免操纵Controller中的DOM。

Answer 2

为了删除验证错误，您应该删除该元素并再次编译表单，您的代码应该是这样的，您还应该将$compile注入您的控制器

 var MyEle =  angular.element(document.getElementById('testID'));
 MyEle.remove();
 var parentElement = document.getElementsByClassName("testData");
 $compile($(parentElement)($scope);

Answer 3

我可以建议你使用更多Angular方法制作动态表单，查看代码段

＆＃13;

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  $scope.form = [{
    name: "FirstName1",
    required: true,
    type: "text",
    value: "billy"
  }, {
    name: "FirstName2",
    required: true,
    type: "text",
    value: "bolly"
  }];

  $scope.remove = function() {
    $scope.form.pop();
  };

  $scope.add = function() {
    $scope.form.push({
      name: "new_input_"+$scope.form.length,
      required: true,
      type: "text",
      value: "bolly_"+$scope.form.length
    });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <input type="{{input.type}}" ng-repeat="input in form" name="{{input.name}}" ng-model="input.value" ng-required="input.required" />
  <button ng-click="add()">add</button>
  <button ng-click="remove()">remove</button>
</body>

＆＃13;

动态添加的元素不会从角度JS

3 个答案: