angularjs единой формы для массива объектов

Question

Я имею ниже данных в контроллере -

$scope.template1 = { 
    name: 'template1', 
    blocks: [ 
     { id: 1, display: true, title: 'News' }, 
     { id: 2, display: true, title: 'News' }, 
     { id: 3, display: true, title: 'News' }, 
     { id: 4, display: true, title: 'News' }, 
     { id: 5, display: true, title: 'News' } 
    ] 
}; 

Данные блоки используется для создания информационных блоков с помощью ng-repeat и по щелчку этого я хочу, чтобы отобразить форму для редактирования его детали.

Один из способов - сделать ng-repeat и создать отдельные формы для каждого блока. Но вместо этого я хотел бы иметь общую форму для этого, а также когда пользователь меняет свои данные, изменения должны отражаться как предварительный просмотр в реальном времени. Я попытался бы эти формы генерируются динамически, но привязка не работает :(

Может ли один помочь, пожалуйста, об этом или привести пример?

Благодарности

Answer 1

сохранить задание выделенного блока в переменном объеме и связать это с входным элементом.

Разметка

<div ng-app ng-controller="TestController" style="padding:10px;"> 
    <div ng-repeat="block in template1.blocks" class="blocks" ng-click="vm.selectedBlock = block"> 
     <span>{{block.title}}</span> 
    </div> 

    <div style="clear:both" data-ng-show="vm.selectedBlock"> 
     <input type="text" ng-model="vm.selectedBlock.title" /> 
    </div> 
</div> 

Контроллер

function TestController($scope) { 
    $scope.template1 = { 
     name: 'template1', 
     blocks: [ 
      { id: 1, display: true, title: 'News' }, 
      { id: 2, display: true, title: 'News' }, 
      { id: 3, display: true, title: 'News' }, 
      { id: 4, display: true, title: 'News' }, 
      { id: 5, display: true, title: 'News' } 
     ] 
    }; 

    $scope.vm = {} 
} 

Working Fiddle