Хотите добавить элемент <input> html с идентификатором автоинкремента, используя ANGULAR

0

У меня есть 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="">, как это.

Как это сделать в Угловом? Будет ли это легко?

Теги:

2 ответа

1
Лучший ответ

Вы можете сделать это с помощью 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'
   })       
}

https://jsfiddle.net/ebinmanuval/fu7yL83m/

  • 0
    спасибо за объяснение с запущенным примером
  • 0
    Я просто изменил ваш пример кода с дополнительной информацией. Это работает так, как я хочу jsfiddle.net/fu7yL83m/7
1

в вашем 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

}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню