AngularJS添加表示数组模型的输入

时间:2013-11-30 00:20:45

标签: 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('');
   }

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

1 个答案:

答案 0 :(得分:3)

在数组中使用对象而不是基元。像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