많은 입력을 데이터베이스화하는 angularjs 방법은 무엇입니까?

많은 입력을 데이터베이스화하는 angularjs 방법은 무엇입니까?

저는 angularjs를 배우고 있는데 사용자가 많은 입력을 할 수 있도록 하고 싶습니다.이러한 입력이 입력되면list따라서 어레이 요소가 변경됩니다.ngRepeat 디렉티브를 사용해 보려고 했는데 새로운 스코프가 생성되기 때문에 데이터베이스를 바인딩할 수 없다는 것을 알았습니다.

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

커스텀 디렉티브를 사용하여 이 작업을 수행해야 하는지 아니면 다른 방식으로 접근해야 하는지 고민하고 있습니다.

기본 "항목"에 대한 데이터 바인딩이 작동하지 않는 이유는 ng-repeat이 각 항목에 대해 하위 범위를 생성하는 방식 때문입니다.각 항목에 대해 ng-repeat은 새 하위 범위를 상위 범위에서 프로토타입으로 상속한 다음(아래 그림의 점선 참조) 항목 값을 하위 범위의 새 속성(아래 그림의 빨간색 항목)에 할당합니다.새 속성의 이름은 루프 변수의 이름입니다.ng-repeat 소스 코드:

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

항목이 프리미티브인 경우 새 하위 범위 속성은 기본적으로 프리미티브 값의 복사본을 할당합니다.이 하위 범위 속성은 상위 범위에 표시되지 않으며 입력 필드에 대한 변경 내용은 이 하위 범위 속성에 저장됩니다.예를 들어, 상위 범위에 다음과 같은 기능이 있다고 가정합니다.

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

HTML에서 다음을 수행합니다.

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

그러면 첫 번째 자식 범위는 다음과 같습니다.item속성(기본값 포함)value 1):

item: "value 1"

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

이를 확인하려면 하위 범위를 콘솔에 로깅합니다.ng-repeat에서 HTML에 추가합니다.

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

컨트롤러에 추가:

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

---

With @Gloopy's approach, each child scope still gets a new "item" property, but because list is now an array of objects, childScope[valueIdent] = value; results in the item property's value being set to a reference to one of the array objects (not a copy).

showScope() 기술을 사용하면 자스코프가item속성 값이 배열 개체 중 하나를 참조합니다. 더 이상 원시 값이 아닙니다.

ng-repeat 하위 범위에서 기본 요소에 바인딩하지 않음 및
AngularJS에서 스코프 프로토타입/프로토타입 상속의 뉘앙스는 무엇입니까?(ng-scope를 사용하는 경우의 스코프 그림이 포함되어 있습니다).

운이 좋으시다면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' } ];
}​

이 바이올린을 예로 들어주세요.

한편 문자열 배열에 바인드하려고 하면 변경하려는 값이 원래 배열 문자열 프리미티브에 연결되지 않기 때문에 새로운 스코프로 인해 문제가 발생합니다(이 예에서 보듯이).

저는 이것을 하는 흥미로운 방법을 찾았습니다. 그리고 그것은 제가 일련의 원형을 연구할 수 있게 해줍니다.

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>

JavaScript:

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

링크: http://jsfiddle.net/bxD2P/10/ (스타트 바이올린에 대해 Gloopy에게 감사합니다)

이 동작에 구멍을 뚫을 수 있는 쉬운 방법이 있을 거라고 확신하고 있습니다.그것들을 듣고 싶습니다.그럼 내 코드를 보강할 수 있을 거야

방법은 다음과 같습니다.텍스트 영역과 리피터와는 다른 구조를 사용했지만 주요 개념은 다음과 같습니다.

• 인덱스를 기준으로 단순 값을 표시합니다(바인드 없음).
• 모델 업데이트 시
• 모델 업데이트 재실행 시

그것은 본질적으로 결속력을 속이는 것이다.

현용 바이올린 - 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;
            };
        }
    };
  })
;

을 검토해 주세요.ngList디렉티브 https://docs.angularjs.org/api/ng/directive/ngList

언급URL : https://stackoverflow.com/questions/12977894/what-is-the-angularjs-way-to-databind-many-inputs