사용자가 ngRepeat및 을 사용하여 항목 목록을 편집 할 수 있도록하려고합니다 ngModel. ( 이 바이올린을 참조하십시오 .) 그러나 내가 시도한 두 가지 접근 방식 모두 기괴한 동작을 유발합니다. 하나는 모델을 업데이트하지 않고 다른 하나는 각 키 다운에서 양식을 흐리게합니다.
내가 여기서 뭔가 잘못하고 있니? 지원되는 사용 사례가 아닙니까?
다음은 편의를 위해 복사 한 바이올린의 코드입니다.
<html ng-app>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-init="names = ['Sam', 'Harry', 'Sally']">
<h1>Fun with Fields and ngModel</h1>
<p>names: {{names}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="name in names">
Value: {{name}}
<input ng-model="name">
</div>
<p class="muted">The binding does not appear to be working: the value in the model is not changed.</p>
<h3>Indexing into the array:</h3>
<div ng-repeat="name in names">
Value: {{names[$index]}}
<input ng-model="names[$index]">
</div>
<p class="muted">Type one character, and the input field loses focus. However, the binding appears to be working correctly.</p>
</body>
</html>
답변
이것은 구속력이있는 문제인 것 같습니다.
조언은 프리미티브에 묶이지 않는다는 것 입니다.
귀하는 ngRepeat이 객체를 통해 반복하는을해야 할 때, 집합의 내부 문자열을 반복한다. 문제를 해결하려면
<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
<h1>Fun with Fields and ngModel</h1>
<p>names: {{models}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="model in models">
Value: {{model.name}}
<input ng-model="model.name">
</div>
jsfiddle : http://jsfiddle.net/jaimem/rnw3u/5/
답변
Angular 최신 버전 (1.2.1)을 사용하고 $index. 이 문제는 해결되었습니다.
<div ng-repeat="(i, name) in names track by $index">
Value: {{name}}
<input ng-model="names[i]">
</div>
답변
이 방법을 이해하는 것이 필요하다 때 어려운 상황에 들어가 범위 , ngRepeat 및 ngModel 와 NgModelController의 일을. 또한 1.0.3 버전을 사용하십시오. 귀하의 예는 약간 다르게 작동합니다.
jm-에서 제공하는 솔루션을 간단히 사용할 수 있습니다.
그러나 상황을 더 깊이 다루고 싶다면 다음을 이해해야합니다.
- AngularJS가 작동하는 방법 ;
- 범위에는 계층 구조가 있습니다.
- ngRepeat는 모든 요소에 대해 새로운 범위를 만듭니다.
- 추가 정보 (hashKey)가있는 항목의 ngRepeat 빌드 캐시 캐시에없는 모든 새 항목에 대한 각 감시 호출에서 ngRepeat는 새 범위, DOM 요소 등을 구성 합니다. 자세한 설명 .
- 1.0.3부터 ngModelController는 실제 모델 값으로 입력을 다시 렌더링합니다.
AngularJS 1.0.3에서 “각 요소에 직접 바인딩”예제가 작동하는 방식 :
- 입력에 문자
'f'를 입력합니다. ngModelController상품 범주 모델을 변경 (이름 배열이 변경되지 않는다) =>name == 'Samf',names == ['Sam', 'Harry', 'Sally'];$digest루프가 시작됩니다.ngRepeat항목 범위 ('Samf')의 모델 값을 변경되지 않은 이름 배열 ('Sam')의 값으로 대체합니다 .ngModelController실제 모델 값 ('Sam')으로 입력을 다시 렌더링합니다 .
“배열로 인덱싱”예제의 작동 방식 :
- 입력에 문자
'f'를 입력합니다. ngModelController이름 변경 항목array=>`names == [ ‘Samf’, ‘Harry’, ‘Sally’];- $ digest 루프가 시작되었습니다.
ngRepeat'Samf'캐시에서 찾을 수 없습니다 .ngRepeat새 범위를 만들고 새 입력으로 새 div 요소를 추가합니다 (이것이 입력 필드가 포커스를 잃는 이유입니다. 이전 입력이있는 이전 div가 새 입력이있는 새 div로 대체 됨).- 새 DOM 요소에 대한 새 값이 렌더링됩니다.
또한 AngularJS Batarang 을 사용 하고 입력 한 입력으로 div 범위의 $ id가 어떻게 변경되는지 확인할 수 있습니다.
답변
키를 누를 때마다 모델을 업데이트 할 필요가없는 경우에는 nameblur 이벤트에서 배열 항목에 바인딩 한 다음 업데이트 하기 만하면됩니다 .
<div ng-repeat="name in names">
Value: {{name}}
<input ng-model="name" ng-blur="names[$index] = name" />
</div>답변
방금 AngularJs를 1.1.2로 업데이트했으며 문제가 없습니다. 이 버그가 수정 된 것 같습니다.
http://ci.angularjs.org/job/angular.js-pete/57/artifact/build/angular.js
답변
문제 는 객체 ng-model와 함께 작동 input하고 덮어 쓰는 방식 name에있어 ng-repeat.
해결 방법으로 다음 코드를 사용할 수 있습니다.
<div ng-repeat="name in names">
Value: {{name}}
<input ng-model="names[$index]">
</div>도움이되기를 바랍니다.
답변
나는 그것이 매력처럼 작동한다는 내 문제에 대해 위의 해결책을 시도했습니다. 감사!
http://jsfiddle.net/leighboone/wn9Ym/7/
내 버전은 다음과 같습니다.
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.models = [{
name: 'Device1',
checked: true
}, {
name: 'Device1',
checked: true
}, {
name: 'Device1',
checked: true
}];
}및 내 HTML
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<h1>Fun with Fields and ngModel</h1>
<p>names: {{models}}</p>
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>Feature 1</td>
<th>Feature 2</th>
<th>Feature 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Device</td>
<td ng-repeat="modelCheck in models" class=""> <span>
{{modelCheck.checked}}
</span>
</td>
</tr>
<tr>
<td>
<label class="control-label">Which devices?</label>
</td>
<td ng-repeat="model in models">{{model.name}}
<input type="checkbox" class="checkbox inline" ng-model="model.checked" />
</td>
</tr>
</tbody>
</table>
</div>
</div>