ngRepeat => 편집 불가능한 입력을 사용하여 입력을 일련의 원시 요소에 바인딩

ngRepeat => 편집 불가능한 입력을 사용하여 입력을 일련의 원시 요소에 바인딩

여기 제 문제에 대한 데모가 있습니다.

$scope.myNumbers = [10, 20, 30];

<div ng-repeat="num in myNumbers">
    <input type="text" ng-model="num">
    <div>current scope: {{num}}</div>
</div>

입력이 편집 불가/읽기 전용인 이유를 설명해 주실 수 있습니까?만약 그것이 의도적인 것이라면, 그 배경에는 어떤 이유가 있을까요?

2014년 2월 20일 갱신

이것은 v1.2.0+ 데모에서는 문제가 되지 않는 것 같습니다.그러나 사용자 컨트롤은 새로운 각도로 편집할 수 있습니다.JS 버전입니다.num상위 범위가 아닌 하위 범위의 속성이 수정됩니다.즉, 사용자 컨트롤의 값을 변경해도myNumbers어레이를 설정합니다.

입력이 편집 불가/읽기 전용인 이유를 설명해 주실 수 있습니까?만약 그것이 의도적인 것이라면, 그 배경에는 어떤 이유가 있을까요?

이는 Angular 1.0.3에서 의도된 것입니다.Artem은 "각 ng-repeat 항목에 직접 바인딩"했을 때 1.0.3+가 어떻게 작동하는지 잘 설명합니다.

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num">

페이지가 처음 렌더링될 때 다음과 같이 스코프의 그림이 표시됩니다(그림에 상자가 적어지도록 어레이 요소 중 하나를 삭제했습니다).

^{(클릭 시 확대)}

점선은 프로토타입 스코프 상속을 나타냅니다.
회색 선은 하위 → 상위 관계를 나타냅니다(예: 무엇을 나타냄).$parent참조).
갈색 줄은 $$nextSibling을 나타냅니다.
회색 상자는 원시 값입니다.파란색 상자는 어레이입니다.보라색은 물체입니다.

댓글에서 언급하신 제 SO 답변은 1.0.3이 나오기 전에 작성되었습니다.1.0.3 이전 버전에서는numngRepeat 자 스코프의 값은 텍스트 상자에 입력하면 실제로 변경됩니다.(이러한 값은 부모 스코프에는 표시되지 않습니다).1.0.3 이후 ngRepeat이 ngRepeat 스코프를 대체하게 되었습니다.num상위/MainCtrl 스코프의 (변경되지 않은) 값을 가진 값myNumbers다이제스트 사이클 중에 어레이를 설정합니다.이는 기본적으로 입력을 편집할 수 없게 만듭니다.

수정은 MainCtrl에서 객체 배열을 사용하는 것입니다.

$scope.myNumbers = [ {value: 10}, {value: 20} ];

그 다음 에 바인드 합니다.valuengRepeat 내 객체의 속성:

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num.value">
  <div>current scope: {{num.value}}</div>

이 문제는 최근 버전의 Angular를 통해 해결되었습니다.JS와track by리피터가 원본을 넘어서는 기능:

<div ng-repeat="num in myNumbers track by $index">
  <input type="text" ng-model="myNumbers[$index]">
</div>

키를 누를 때마다 페이지가 다시 그려지지 않으므로 포커스가 손실되는 문제가 해결됩니다.공식 AngularJS doc은 이것에 대해 상당히 모호하고 혼란스럽다.

Angular는 그렇게 정의된 모델에 쓸 수 없는 것 같습니다.초기 $scope Atribut에 대한 참조를 사용하여 값을 올바르게 바인딩합니다.

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="myNumbers[$index]">
</div>

ngRepeat는 소스 어레이에 대한 참조를 사용합니다.부터integer (Number in js)는 참조 유형이 아닌 값 유형이기 때문에 Javascript에서 참조로 전달할 수 없습니다.변경은 반영되지 않습니다.

다음은 데모를 보여드리겠습니다.

   var x = 10;
   var ox = {value:10};

   var y = x;
   var oy = ox;

   y = 15
   oy.value = 15;

ㅇㅇㅇㅇㅇ의 요?x ★★★★★★★★★★★★★★★★★」ox

>> x = 10;
>> y = 15;
>> ox = {value:15};
>> oy = {value:15};

모든 Javascript 객체는 참조로 전달되고 모든 프리미티브는 값 ["string", "number" 등]으로 전달됩니다.

현용 plunker http://plnkr.co/edit/7uG2IvAdC2sAEHbdHG58

비슷한 문제('추가' 및 '제거' 기능도 필요)가 발생하여 다음과 같이 문제를 해결했습니다.

$scope.topics = [''];
$scope.removeTopic = function(i) {
   $scope.topics.splice(i, 1); 
}

<div ng-repeat="s in topics track by $index">
    <input ng-model="$parent.topics[$index]" type="text">
    <a ng-click="removeTopic($index)">Remove</a>
</div>

<a ng-click="topics.push('new topic')">Add</a>

언급URL : https://stackoverflow.com/questions/15488342/binding-inputs-to-an-array-of-primitives-using-ngrepeat-uneditable-inputs