Складність з ng-моделлю, ng-повтором та введеннями

Я намагаюся дозволити користувачеві редагувати список елементів за допомогою 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 створює нове поле для кожного елемента;
• ngRepeat складати кеш елементів з додатковою інформацією (hashKey); під час кожного виклику годинника для кожного нового елемента (якого немає в кеші) 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'];
• $ цикл дайджесту запускається;
• ngRepeatне вдається знайти 'Samf'в кеші;
• ngRepeat створює новий діапазон, додає новий елемент div з новим входом (саме тому поле введення втрачає фокус - старий div зі старим входом замінюється на новий div з новим входом);
• відображаються нові значення для нових елементів DOM.

Крім того, ви можете спробувати використовувати AngularJS Batarang і побачити, як змінюється $ id сфери діва на вхід, в який ви вводите.

Якщо модель не потребує оновлення кожного натискання клавіші, просто прив’яжіть до нього, nameа потім оновіть елемент масиву для події розмивання:

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

як зробити щось на кшталт:

<select ng-model="myModel($index+1)">

І в моєму інспекторному елементі бути:

<select ng-model="myModel1">
...
<select ng-model="myModel2">