ng-repeat：添加新元素的 ng-model 问题

Question

我有我的输入形式并使用 ng-repeat 我用按钮动态添加新的输入字段。每个输入已在 "text".

之前完成

问题：

当我通过按钮插入新的输入字段时，第一个输入字段清除了文本。

我在我的浏览器调试器中验证，我的项目数组的第一个元素不为空。为什么它不存在于输入中？

有我的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"});
}

Answer 1

(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

ng-repeat：添加新元素的 ng-model 问题

ng-repeat : ng-model problem adding new element

angularjs

angularjs-ng-repeat