У меня есть html-контент
<div id="abc"></div>
<input type="button" name="xyz" value="Add Input">
Я хочу, чтобы, когда мы нажимаем выше кнопку "Добавить вход", тогда следующий тег ввода должен быть добавлен с идентификатором автоинкремента в содержимом div "abc".
<input id="mx1" value="">
Когда мы в первый раз кликаем, он должен добавить <input id="mx1" value="">
, когда мы нажмем следующий раз, тогда он должен добавить <input id="mx2" value="">
, как это.
Как это сделать в Угловом? Будет ли это легко?
Вы можете сделать это с помощью ng-repeat
<div id="abc">
<input type="text" id="{{input.id}}" ng-repeat="input in inputs">
</div>
<input type="button" name="xyz" value="Add Input" ng-click="addInput()">
В вашем контроллере
$scope.inputs = [];
$scope.addInput = function() {
id = $scope.inputs.length + 1
$scope.inputs.push({
id: id,
value: 'value'
})
}
в вашем html:
<div ng-repeat="data in inputData">
<input id="mx{{$index}}" ng-model="data.value">
</div>
<input type="button" name="xyz" ng-click="addButton()" value="Add Input">
В вашем контроллере:
$scope.inputData = []; //declare an empty array
$scope.addButton = function(){
$scope.inputData.push({value: ''}); //push new object to this array
}