javascript - AngularJS添加代表数组模型的输入

我无法理解的简单AngularJS问题。

Plunkr：http://plnkr.co/edit/OjaooVOQBEETkhaZFbWG?p=preview

HTML;

    <div ng-repeat="label in likedLabels">
         <input ng-model="likedLabels[$index]">
    </div>
    {{likedLabels}}
    <button ng-click="addInput()">+add more inputs</button>

JS：

   $scope.likedLabels = ['']
   $scope.addInput = function(){
     $scope.likedLabels.push('');
   }

我基本上是在尝试创建一种用户操作的方式来添加输入框，并将内部内容链接到模型。我在这里做错了什么？

最佳答案

在数组中使用对象而不是基元。像ng-repeat这样的指令为数组中的每个重复项创建单独的子作用域。

由于原型继承，对象将作为原始对象的引用传递给子作用域，而基元（字符串，布尔值等）则不会。因此，作用域树中没有基元的数据绑定

的HTML

<div ng-repeat="item in likedLabels">
    <input ng-model="item.label">
</div>

JS

 $scope.likedLabels = []
  $scope.addInput = function() {
    $scope.likedLabels.push({label: ''});
  }

DEMO