많은 입력을 databind하기위한 각도 방법은 무엇입니까?

Question

나는 angularjs를 배우고 있으며 사용자가 많은 입력을 할 수 있도록하고 싶습니다. 이 입력이 입력되면 list 배열 요소가 그에 따라 변경되어야합니다. 나는 ngRepeat 지시어를 사용하여 시험해보고 싶었다 그러나 나는 새로운 범위를 작성하기 내가 데이터 바인딩 할 수없는 읽기 : 나는이 작업을 수행하거나 다르게 접근하는 사용자 정의 지시어를 사용해야하는지 궁금

<div ng-repeat="item in list"> 
    <label>Input {{$index+1}}:</label> 
    <input ng-model="item" type="text"/> 
</div> 

.

Answer 1

list이 개체 배열 (기본 요소 배열과 반대) 인 경우 더 유용 할 것입니다. 이것은 새로운 범위가 ng-repeat로 만든 경우에도 잘 작동 :

<div ng-repeat="item in list"> 
    <label>Input {{$index+1}}:</label> 
    <input ng-model="item.value" type="text"/> 
</div> 

을의 컨트롤러 :

function TestController($scope) { 
    $scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ]; 
}​ 

예로 들어 this fiddle를 참조하십시오.

문자열 배열에 바인딩하려는 경우 수정하려는 값이 원래 배열 문자열 프리미티브 (예 : this fiddle 예와 같이)와 관련되지 않으므로 새 범위에서 문제가 발생할 수 있습니다.

Answer 2

프리미티브 "항목"에 대한 데이터 바인딩이 작동하지 않는 이유는 ng-repeat가 각 항목에 대해 하위 범위를 만드는 방식 때문입니다. 각 항목에 대해 ng-repeat에는 상위 범위 (기본 그림의 점선 참조)에서 상속받은 새 하위 범위가 있고 및 하위 항목의 새 속성에 항목 값이 할당됩니다 (아래 그림의 빨간색 항목). 새 속성의 이름은 루프 변수의 이름입니다. ng-repeat source code에서 : 항목이 원시적 인 경우

childScope = scope.$new(); 
... 
childScope[valueIdent] = value; 

, 새로운 아이 범위 속성은 본질적으로의 프리미티브 값의 사본을 할당됩니다. 이 하위 범위 속성은 부모 범위에서 볼 수 없으며 입력 필드에 대한 변경 사항은이 하위 범위 속성에 저장됩니다.

<div ng-repeat="item in list"> 

그런 다음, 첫 번째 자식 범위가 기본 값으로, (value 1를) 다음 item 속성을했을 :

예, 우리는 부모 범위

$scope.list = [ 'value 1', 'value 2', 'value 3' ]; 

에있는 그리고 HTML의 가정

item: "value 1" 

ng-model 데이터 바인딩으로 인해 양식의 입력 필드에 대한 변경 사항이 해당 하위 범위 속성에 저장됩니다.

콘솔에 하위 범위를 기록하여이를 확인할 수 있습니다.

<a ng-click="showScope($event)">show scope</a> 

컨트롤러에 추가 : 다음 NG 반복 안에, 당신의 HTML에 추가

$scope.showScope = function(e) { 
    console.log(angular.element(e.srcElement).scope()); 
} 

---

을 Gloopy의 접근 @를 통해 각 아동의 범위는 여전히 새 "항목"속성을 얻을 수 있지만, 이제 list가 객체 배열이므로 childScope[valueIdent] = value;은 item 속성의 값이 배열 객체 중 하나 (사본이 아님)에 대한 참조로 설정되도록합니다. showScope() 기술을 사용하여

, 당신은 자식 범위 item 속성의 값이 배열 개체 중 하나를 참조하는 것을 볼 수 있습니다 - 더 이상 원시적 값입니다.

도 참조하십시오. don't bind to primitives in ng-repeat child scopes 및
What are the nuances of scope prototypal/prototypical inheritance in AngularJS? (ng-repeat를 사용할 때 범위의 그림이 포함되어 있음)

Answer 3

여기 방법이 있습니다. 텍스트 영역과 다른 구조를 내 리피터에 사용했지만 주요 개념은 다음과 같습니다.

• 인덱스를 기반으로 간단한 값을 표시합니다. 흐림
• 그것은 본질적으로, 바인딩 날조되어

렌더링 다시 모델 업데이트에 모델

를 업데이트 (구속되지 않음).

근무 바이올린 - http://jsfiddle.net/VvnWY/4/

HTML :

<script type="text/ng-template" id="textareas.html"> 
    <textarea ng-if="strings" ng-repeat="str in strings" ng-blur="blur($event, $index)">{{strings[$index]}}</textarea> 
    </script> 

<div ng-controller="MyCtrl"> 
    Here's a few strings: <br /> 
    <div ng-repeat="str in strings">{{strings[$index]}}</div> 

    Here's the strings as editable (twice so that you can see the updates from a model change): <br /> 
    <form-textareas strings="strings"></form-textareas> 
    <form-textareas strings="strings"></form-textareas> 

</div> 

JS :

var myApp = angular.module('myApp',[]); 
angular.module('myApp', []) 
    .controller('MyCtrl', ['$scope', function($scope) { 
    $scope.strings = [ "foo", "bar", "cow" ]; 
    }]) 
    .directive('formTextareas', function() { 
    return { 
     restrict: "E", 
     scope: { 
      strings: '=' 
     }, 
     templateUrl: "textareas.html", 
     link: function($scope){ 
      $scope.blur = function($event, $index){ 
       $scope.strings[ $index ] = $event.currentTarget.value; 
      }; 
     } 
    }; 
    }) 
; 

Answer 4

내가이 일을 흥미로운 방법을 발견

Answer 5

https://docs.angularjs.org/api/ng/directive/ngListngList 지시어를 사용하는 것을 고려 , 그리고 그것은 내가 일하도록 허락하고있다. 프리미티브의 배열에.

나는이 일을 할 수있는 유일한 버전 인 AngularJS와 1.2.1을 사용하고

HTML :.

<div ng-repeat="item in list"> 
    <label>Input {{$index+1}}:</label> 
    <input ng-model="item" type="text" ng-blur="editItem($index, item)"/> 
</div> 

자바 스크립트 :

$scope.editItem = function(idx, eItem) { 
    $scope.list[idx] = eItem; 
}; 

링크 : http://jsfiddle.net/bxD2P/10/ (Gloopy에게 시동기 피들을 보내 주셔서 감사합니다)

나는 이것이 어떻게 작동하는지에 대한 구멍을 뚫는 쉬운 방법이있을 것이라고 확신하며, 나는 그것들을 듣고 싶다. 그것은 내 코드를 떠받 칠 수있게 해줄 것이다.