Angular itself is not allowed to operate the DOM, in angular's view, all operations are data-centric, and the rest is done by angular. So it's not that difficult to figure out the root of the problem.
PrerequisitesSo, to do this add delete to have the following features:
1, when the data only one, the deletion is not allowed;
2, the first data is not allowed to modify and delete;
3. You can add the maximum number of bars dynamically (set to 4 in the example).
First, use the bootstrap layout to add and remove an interface:
<body ng-app= "App" > <form class= "form-horizontal" ng-controller= "index" > <label class= "Col-sm-2 C Ontrol-label "> Bind domain name:</label> <div class=" col-sm-10 "> <div ng-repeat=" domain in Info.ope Rate "> <div class=" Form-group "> <label class=" Control-label col-sm-1 "for=" D omain{{$index + 1}} "> domain name {{$index + 1}}</label> <div class=" col-sm-9 "> <input type= "text" id= "domain{{$index + 1}}" class= "for M-control "ng-model=" Domain.value "name=" domain{{$index + 1}} " Ng-disabled= "! $index"/> </div> <div clas s= "Col-sm-2" > <button class= "btn btn-default" type= "button" Ng-disabled= "Info.operate.length >= 4" ng-click= "Info.add ($index)" >+</button& Gt <button class= "btn btn-default" type= "button" ng-click= "I Nfo.delete ($index) "ng-show=" $index ">-</button> </div> </div> </div> </div> <div class= "col-sm-offset-3" ><button Type= "button" class= "btn btn-primary" ng-click= "Info.result ()" > Results </button></div> </form></ Body>
Then, the need is to use angular operation data to complete the above functions:
var app = Angular.module (' app ', []); App.controller (' Index ', function ($scope, $log) { $scope. info = {}; $scope. info.operate = []; Suppose this is the data source var simp = ["www.baidu.com"]; Angular.foreach (Simp, function (data, index) { $scope. Info.operate.push ({key:index, value:data}); }); Add $scope. Info.add = function ($index) { $scope. Info.operate.splice ($index + 1, 0, {key: $index + 1, Value: ""} ); }; Delete $scope. info.delete = function ($index) { $scope. Info.operate.splice ($index, 1); }; The result $scope. Info.result = function () { var result = []; Angular.foreach ($scope. info.operate, function (data) { result.push (data.value); }); $log. Debug (Result); };});
At this point, the function has been written, the specific effect
Of course, this is just a simple input example, and does not do such as the input box must fill the function.
angular-form Dynamic Add Delete
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
