ng-repeat: проблема ng-модели при добавлении нового элемента - PullRequest
Новая
       4

ng-repeat: проблема ng-модели при добавлении нового элемента

0 голосов
/ 01 ноября 2018

У меня есть форма ввода и, используя ng-repeat, я добавляю новые поля ввода динамически с помощью кнопки. Каждый ввод уже завершен «текстом».

Проблема:

Когда я вставляю новое поле ввода кнопкой, первое поле ввода очищает текст.

Я проверяю в моем браузере отладчик, и первый элемент моего массива Items не пуст. Почему его нет на входе?

Вот мой HTML: 

<div class="row">
    <div class="col-sm-10">
        <input ng-repeat="item in vm.myItemsArray" 
        name="myItemName" 
        class="form-control" 
        type="text" 
        ng-model="item.value"/>
    </div>
    <div class="col-sm-1 col-sm-offset-1">
        <span ng-click="addItem()" class="glyphicon glyphicon-plus btn-sm btn-default"/>
    </div>
</div>

И JS: 

// INITIALIZE INPUTS
vm.myItemsArray = [{value: "text"}];

// ADD NEW INPUTS
function addItem() {
    vm.myItemsArray.push({value: "text"});
}

1 Ответ

0 голосов
/ 01 ноября 2018 

(function() {
    'use strict';
    angular
        .module('angularExampleModule',[])
        .controller('angularExampleController', ['$scope', angularExampleController]);

    function angularExampleController($scope){
      $scope.myItemsArray = [{value: "text"}];
      $scope.addItem = function () {
      	$scope.myItemsArray.push({value: "text"});
      }
}
})();
.input-element{
  margin:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularExampleModule" ng-controller="angularExampleController">
<div class="row">
    <div class="col-sm-10 input-element" ng-repeat="item in myItemsArray">
        <input name="myItemName" class="form-control" type="text" ng-model="item.value"/>
    </div>
    <div class="col-sm-1 col-sm-offset-1">
    <button ng-click="addItem()" class="glyphicon glyphicon-plus btn-sm btn-default">Add Item</button>
 
    </div>
</div>

ИЛИ Проверьте это https://codepen.io/DeepaliK/pen/BqXqNB

...