AngularJS, добавляющий входы, которые представляют модель массива

Question

Простые вопросы 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(''); 
    } 

Я в основном пытаюсь создать пользовательский управляемый способ добавления полей ввода и имеющих содержание внутри связанного с моделью. Что я здесь делаю неправильно?

Answer 1

Используйте объекты вместо примитивов в своих массивах. Директивы типа 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