다중 입력 필드를 동적으로 작성하십시오. 배열로 제출

Question

jsFiddle을 만들었습니다. check it out

현재 범위를 만들 때 격리되지 않습니다. 따라서 두 입력 필드를 만들고 그 중 하나를 입력하면 텍스트가 보조 입력 필드에 복제됩니다.

어떻게 여러 개의 입력을 만들어 개별적으로 입력하고 동시에 모두 제출할 수 있습니까? 내 논리에 불과 결함

HTML

<div ng-app="miniapp" ng-controller="MainCtrl"> 
    <a href="" data-clicker>add inputs</a> 
    <form ng-model="project" ng-submit="addPage()"> 
     <div class="sections"></div> 

     <input type="submit" value="submit"/> 
    </form> 

    <hr> 
    <hr> 
    <p>project: {{project.name | json}}</p> 
    <p>output: {{output | json}}</p> 
</div> 

JS

var $scope; 
var app = angular.module('miniapp', []); 

app.directive('clicker', function($compile) { 
    'use strict'; 

    return { 
     compile: function(tElement, tAttrs) { 
      //var t = '<div data-pop>Pop</div>'; 
      var t = '<div><input type="text" ng-model="project.name"></div>'; 

      return function(scope, iElement) { 
       iElement.click(function() { 
        $('.sections').append($compile(t)(scope)); 
       }); 
      }; 
     } 
    } 
}); 



app.controller('MainCtrl', function($scope) { 
    $scope.project = {"name":"sup"}; 
    $scope.output = []; 
    $scope.addPage = function() { 
    $scope.output.push(_.clone($scope.project)); 
    }; 


}); 

내가 모든 것을 시도했습니다 같은 느낌 ...인가? 그렇다면 아래의 사용자 흐름에 따라 작동하는 예제를 보여줄 수 있습니까?

사용자 흐름이 각각 다른 속성에 액세스하면 project.name

var t = '<div><input type="text" ng-model="project.name"></div>'; 

스위치 여기에 같은 모델 속성을 연결하는 새로운 입력을 만들 때마다

Answer 1

객체 배열을 반복하고 데이터 바인딩을 사용하여 입력 필드를 생성하려면 지시문 인 을 사용해야합니다. http://jsfiddle.net/89AYX/42/ NG-반복으로

는, 블록 내에서 모든 배열 모델의 각 반복에 대해 자동으로 컴파일되는 템플릿이된다 : 여기

는 지시어를 사용하여 코드의 단순화 된 버전입니다. 배열이 변경 될 때 HTML 자체에서 업데이트되는 for-each 루프와 같이 생각하면됩니다.

<div ng-repeat="project in projects"> 
    <input type="text" ng-model="project.name"/> 
</div> 

시피

는 project 변수는 어레이 오브젝트에 대한 참조로서 블록 내의 액세스된다. 그런 다음 해당 참조를 사용하여 특정 필드의 속성을 사용하여 입력 필드에서 양방향 바인딩을 만들 수 있습니다.

Angular에는 데이터 바인딩과 관련된 많은 공통 문제를 해결하는 유용한 내장 명령이 많이 포함되어 있습니다. 사용 가능한 API 참조를 확인하십시오.

Answer 2

. 또는 할 수있는 경우 속성을 배열로 만듭니다.