[angularjs] ng-model, ng-repeat 및 입력의 어려움

Program / 글쓴이

사용자가 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. 이 문제는 해결되었습니다.

http://jsfiddle.net/rnw3u/53/

<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>